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

bis0qfac  于 2022-11-17  发布在  Vue.js
关注(0)|答案(2)|浏览(142)

您好,我正在尝试以这种方式输入:

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

当用户按下添加按钮时,将添加新的输入字段。
为此,我在vue应用程序数据中使用了一个空数组=〉itemPrices: [],
现在在table元素里面我有这样的代码:

<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'只是一个整数,它决定了应该有多少行。但这是行不通的...什么是这个任务的可能解决方案?

sr4lhrrt

sr4lhrrt1#

如果我没理解错的话,可以将num设置为itemPrices数组长度:
第一个

vptzau2j

vptzau2j2#

如果你确定“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”是什么样子的。

相关问题