Vue JS 在 v-for 中动态获取输入

Question

嗨，我正在尝试以这种方式输入：

itemPrices: [{regionId: "A", price: "200"},{regionId: "B", price: "100"}]

当用户按下添加按钮时，会添加新的输入字段。
为此，我在 vue 应用程序数据中采用了一个空数组 => itemPrices: [],。
现在在表格元素里面我有这个代码：

<vs-tr v-for="n in num" v-bind:key="n">
  <vs-td
    ><vs-input
      v-model="itemPrices[n].regionId"
      placeholder="Region Name"
    /></vs-td>
    <vs-td>
      <vs-input
        placeholder="price"
        v-model="itemPrices[n].price"
      />
    </vs-td>
  </vs-tr>

这里的“num”只是一个整数，它决定应该有多少行。但这不起作用......这个任务的可能解决方案是什么？

Answer 1

如果我理解正确，您将num 设置为itemPrices 数组长度：

new Vue({
  el: '#demo',
  data() {
    return {
      itemPrices: []
    }
  },
  computed: {
    num() {
      return this.itemPrices.length
    }
  },
  methods: {
    addItem() {
      this.itemPrices = [...this.itemPrices, {regionId: "", price: ""}]
    }
  }
})

<link href="https://unpkg.com/vuesax@4.0.1-alpha.16/dist/vuesax.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuesax@4.0.1-alpha.16/dist/vuesax.min.js"></script>
<div id="demo">
  <vs-button @click="addItem">add</vs-button>
  <vs-tr v-for="(n, i) in num" :key="n">
    <vs-td>
      <vs-input
        v-model="itemPrices[i].regionId"
        placeholder="Region Name"
      />
    </vs-td>
    <vs-td>
      <vs-input
        placeholder="price"
        v-model="itemPrices[i].price"
      />
    </vs-td>
  </vs-tr>
</div>

Answer 2

如果您确定“num”是一个填充数组，我认为您可以使用以下代码：

<vs-tr v-for="n in num" v-bind:key="n">
            <vs-td
              ><vs-input
                v-model="n.regionId"
                placeholder="Region Name"
            /></vs-td>
            <vs-td>
              <vs-input
                placeholder="price"
                v-model="n.price"
              />
            </vs-td>
          </vs-tr>

因为 n 是数组中每个实例的表示。

虽然，您也应该提供 JS 代码。通过这种方式，这里的人们可以更好地了解正在发生的事情。例如，我看不到“num”是什么样的。