Question

当我在vue组件中添加一些数据时，我需要向表中动态添加行。我正在使用v-，因为它必须在添加数据后自动添加行，但它不会显示任何内容，仅显示表头。

<table style="width: 95%;" cellspacing="0" id="main2">
  <tbody>
    <tr>
      <th style="width: 55%; background-color: #343434; color: #FFFFFF; text-align: left; font-weight: normal; "><span class="target-field" data-path="name_word_output">Назва</span></th>
      <th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="quantity_word_output">Кількість</span></th>
      <th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="rate_word_output">Вартість</span></th>
      <th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="amount_word_output">Разом</span></th>
    </tr>
    <tr v-for="item in rowData">
      <td style="border: 1px solid #ddd;"><span class="target-field" data-path="issue.name">{{item.tovarname}}</span></td>
      <td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="issue.quantity"></span> <span class="target-field" data-path="issue.unit">{{item.fakturahowmany}}</span></td>
      <td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="currency_type_output">₴</span> <span class="target-field" data-path="issue.price_per_one">{{item.fakturaprice}}</span></td>
      <td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="currency_type_output">₴</span> <span class="target-field" data-path="issue.amount">{{item.fakturahowmany*item.fakturaprice}}</span></td>
    </tr>
  </tbody>
</table>

和另一部分

    methods: {
            addItem(){
                this.$root.totalprice+=this.$root.fakturahowmany*this.$root.fakturaprice;
                var my_object = {
                    tovarname:this.$root.tovarname,
                    fakturahowmany:this.$root.fakturahowmany,
                    fakturaprice:this.$root.fakturaprice,

                };
                this.$root.rowData.push(my_object)

                //


                this.$root.tovarname = 1;
                this.$root.fakturahowmany = 1;
                this.$root.fakturaprice = 1;
            }

        }
    }

我该如何解决？谢谢！

Answer 1

您必须通过v-bind为项目启动唯一的键：key =“ item.id”在您的v-for中

<tr v-for="item in rowData" v-bind:key="item.id" >

链接：https://vuejs.org/v2/guide/list.html#Maintaining-State

在vue js组件中使用v-for

1 个答案: