Vue js动态输入值影响所有其他输入

Question

因此，我带来了一个CMS的数据，它动态地创建一个标题，一个大小和一个输入字段，用户将能够改变。

当我增加输入值(1、2、3、4等)时，所有输入中的值都会发生变化。

我需要获取单个输入的数量，并对其进行一些操作。

如果我的输入类型设置为number，我可以让它工作，但是我希望将它设置为text，这样我就可以使用自定义的增量和递减按钮。正如我所说，按钮和计数器工作，但值克隆到每个输入。我确信这与increaseQty和decreaseQty函数有关。

我是，是Vue的新手，所以温柔点。感谢百万-下面的代码

<template>
  <div>
    <div id="step2items0" class="inventory">
      <div class="inner-wrap">
        <label>Choose Your {{ selected }} Items</label>
      </div>
      <div id="tabBtns" class="hr">
        <div class="inner-wrap mobile-center">
          <div v-for="(tab, index) in tabs" :key="index" @click="selectTab(tab)" class="tab" :class="selected_tab == tab ? 'selected' : ''" >
            {{ tab }}
          </div>
        </div>
      </div>

      <div class="items-wrap">
        <div class="item" v-for="(row, index) in items" :key="index">
          <span class="lbl">{{ row.item_title }}</span>

          <span class="input-wrap" style="display: flex; flex-direction: column">
            <input type="text" name="item_m3" class="number" :value="row.item_m3"/>
            <small>Item M3</small>
          </span>


          <span class="input-wrap">
            <i id="decreaseQty" aria-hidden="true" class="fa fa-caret-left prev-btn" @click="decreaseQty"></i>

            <input id="quantity" type="text" class="number" :value="quantity"/>

            <i id="increaseQty" aria-hidden="true" class="fa fa-caret-right nxt-btn" @click="increaseQty"></i>
          </span>

          <div class="clear"></div>
        </div>
      </div>
    </div>
  </div>
</template>






<script>
module.exports = {
  props: ["selected", "content", "value"],

  data: function () {
    return {
      tabs: [],
      selected_tab: "",
      items: [],
      quantity: 0,
    };
  },
  computed: {

  },

  methods: {
    //

    increaseQty() {
      this.quantity++;
      console.log("AMOUNT -", this.quantity);
    },
    decreaseQty() {
      if (this.quantity === 0) {
        alert("Negative quantity not allowed");
      } else {
        this.quantity--;
        console.log("AMOUNT -", this.quantity);
      }
    },
    //

    selectTab: function (value) {
      console.log("TAB: ", value);
      this.selected_tab = value;
      const { content } = this;
      let { items } = this;

      content.forEach(function (row) {
        if (row.room_name == value) {
          items = row.item;

          items.forEach(function (row) {
            item_title = row.item_title;
            item_m3 = row.item_m3;
            console.log(" - ", item_title, " - ", item_m3);
          });
        }
      });

      this.items = items;
    },
  },
  mounted: function () {
    const { selected, content, tabs } = this;
    let { selected_tab, items } = this;

    console.log("SELECTED: ", selected);

    if (selected === "Household") {
      content.forEach(function (row) {
        if (row.is_household == true) {
          tabs.push(row.room_name);

          if (selected_tab == "") {
            selected_tab = row.room_name;

            items = row.item;

            items.forEach(function (row) {
              item_title = row.item_title;
              item_m3 = row.item_m3;
              console.log(" - ", item_title, " - ", item_m3);
            });
          }
        }
      });
    } else if (selected === "Business") {
      content.forEach(function (row) {
        if (row.is_business == true) {
          tabs.push(row.room_name);

          if (selected_tab == "") {
            selected_tab = row.room_name;

            items = row.item;

            items.forEach(function (row) {
              item_title = row.item_title;
              item_m3 = row.item_m3;
              console.log(row.room_name, " - ", item_title, " - ", item_m3);
            });
          }
        }
      });
    }

    this.selected_tab = selected_tab;
    this.items = items;
  },
};
</script>

<style scoped>
</style>

输入增量影响所有输入。

​

​

Answer 1

通过将值存储在数组中，可以在v-for中获取单个值。

data: {
    items: [],
    itemValues: [],
  },

并使用v-model绑定输入(您使用的是v-bind:value，而不是v-model)。您可以检查这个答案来了解差异。

<div class="item" v-for="(row, index) in items" :key="index">
    <input type="text" v-model="itemValues[index]">
</div>

这里有一个小提琴：https://jsfiddle.net/jariway/jxv0k4y3/62/