Access to property value

Asked

Viewed 53 times

0

I have a method where I need to take the number of each table, but the return is always the length of the property and not its value. If I leave only one table the method correctly returns the value of the property, but if I add more tables in the object, the return will be the length of tables that exist. 

let app = new Vue({

    el: '#app',
    data: {
        tituloApp: 'Acompanhamento de mesas',
        escolhaMesa: 'Escolher a mesa',
        mesas = {

            idMesa: {
                consumo: [
                    {
                        nome: 'suco maracujá',
                        quantidade: 1,
                        valor: 5.50
                    },
                    {
                        nome: 'guaraná coca-cola',
                        quantidade: 1,
                        valor: 3.00
                    },
                    {
                        nome: 'feijoada',
                        quantidade: 2,
                        valor: 12.00
                    }
                ],
                numMesa: 1
            },

            idMesa: {
                consumo: [
                    {
                        nome: 'água',
                        quantidade: 2,
                        valor: 2.50
                    },
                    {
                        nome: 'guaraná fanta-uva',
                        quantidade: 2,
                        valor: 3.00
                    },
                    {
                        nome: 'porção de frios',
                        quantidade: 2,
                        valor: 23.50
                    }
               ],
               numMesa: 2
            }
        },

        methods: { 
            MostraMesa: function(mesa) {
                let idMesa = this.mesas.idMesa.numMesa;   // retorna o length
            }
        }
})

HTML:

<div id="mostra-mesa">
    <div>
        <p>{{ produtos }}</p>
        <ul>
            <li v-for="nomes in mesas">{{ nomes.consumo.nome}}</li>
        </ul>
    </div>
    <div>
        <p>{{ quantidade }}</p>
        <ul>
            <li v-for="consumos in mesas">{{ consumos.consumo.quantidade }}</li>
        </ul>
    </div>
    <div>
        <p>{{ vlrUnit }}</p>
        <ul>
            <li v-for="valores in mesas">{{ valores.consumo.valor }}</li>
        </ul>
    </div>
    <div>
        <p>{{ vlrTotal }}
            <input type="number" readonly v-model="vlrConta" @click="MostraMesa">
        </p>
    </div>
</div>
javascript vue.js vue.js-2

1 answer

1


tables must be an array, cannot use idMesa repeatedly keys must be unique in each object

Wrong shape

mesas={
       idMesa:{}, //está repetir a chave
       idMesa:{}
       }

Correct form

mesas=[
       {idMesa: 1}, 
       {idMesa: 2}
       [

I suggest you create a property same in order to know which table index is currently selected

In the methods you must create functions that return values (not the case in your example)

let app = new Vue({

      el: '#app',
      data: {
        tituloApp: 'Acompanhamento de mesas',
        escolhaMesa: 'Escolher a mesa',
        mesas = [{
            consumos: [{
                nome: 'suco maracujá',
                quantidade: 1,
                valor: 5.50
              },
              {
                nome: 'guaraná coca-cola',
                quantidade: 1,
                valor: 3.00
              },
              {
                nome: 'feijoada',
                quantidade: 2,
                valor: 12.00
              }
            ],
            numMesa: 1
          },
          {
            consumos: [{
                nome: 'água',
                quantidade: 2,
                valor: 2.50
              },
              {
                nome: 'guaraná fanta-uva',
                quantidade: 2,
                valor: 3.00
              },
              {
                nome: 'porção de frios',
                quantidade: 2,
                valor: 23.50
              }
            ],
            numMesa: 2
          }
        ],

        methods: {

          obterIdMesa(mesa) {

            return this.mesas[mesa].numMesa;
          }

        }

      })

Example: v-for

<ul>
   <li v-for="mesa in mesas"> 

        Mesa: {{ mesa.numMesa }}

        <ul>
           <li v-for="consumo in mesa.consumos"> 

            Consumo: {{ consumo.nome }}, Qt:{{ consumo. quantidade}}

           </li>
       </ul>
   </li>
</ul>

  • Thanks for the help Jorge. I edited the question, I had forgotten to pass the function within the method. I will remake my object as you showed and test to see.

  • If it works please confirm the answer

  • Man then, I’m not getting anything else in this structure there, as I do for example to list the property name of a table on a v-for?

  • <li v-for="table in tables"> {{ table.numMesa }} </li>

  • Rsrsr... sorry there man I’m new with Vue, how do I catch name within consumptions made: <li v-for="nomes in mesas"> {{ nomes.consumos.nome }} </li> but brings nothing, only the Bullets of the read.

  • It has two arrays tables and consumes have to make two for one for each array and one within the other

  • So if you want to screw me right Jorge kkkkkk.... I don’t know how you do it, in html you can do it, go inside? In Vue’s documentation I saw nothing like it.

  • See addition in response

  • I’ll edit my question and add html tbm, because that’s where I’m getting lost, in the html structure.

Show 4 more comments

Browser other questions tagged javascript vue.js vue.js-2

You are not signed in. Login or sign up in order to post.