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

Question

所以我从 CMS 中引入数据，该 CMS 动态创建用户可以更改的标题、大小和输入字段。

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

我需要获取单个输入的数量并对其进行处理。

如果我将输入类型设置为数字，我可以有点让它工作，但我想将其设置为文本，以便我可以使用自定义递增和递减按钮。 正如我所说，按钮和计数器可以工作，但值会克隆到每个输入。我确定这与 increaseQty 和 reductionQty 函数有关..

我是非常 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>

Input increment is affecting all inputs

Answer 1

您可以通过将值存储在数组中来获取 v-for 中的各个值。

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

并使用v-model 绑定输入（您使用的是v-bind:value，而不是v-model）。您可以查看this answer 了解其中的区别。

<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/