如何在vuejs中获取$watch下已更改数组的索引

Question

我正在使用对象数组

({"code":"id1","color":"red","description":"eg1"})

其中每个对象都包含输入 fields.User 可以动态添加和删除这些对象。现在我希望当他输入代码时，该字段的其余部分应该自动填写。为此，我开发了一种算法，它将获取代码并给我颜色和描述，但为此我需要更改对象的 POSITION，以便我可以更新该索引本身的数组。以下是我分享的代码：

<div v-for="(x,i) in fabric_arr">
                <!--<pre>{{x}}</pre>-->
                <div class="row">
                  <div class="col-md-4">
                    <span>
                      <input type=”text” list="idOfDatalist" class="form-control  border-input" placeholder="Fabric Code" v-model="x._id">
                        <datalist id="idOfDatalist">
                           <option v-for="y in all_fabrics">{{y._id}}</option>
                        </datalist>
                    </span>
                  </div>
                  <div class="col-md-4">
                    <span>
                      <input type=”text”  class="form-control border-input"  placeholder="Fabric Color" v-model="x.color"></span>
                  </div>
                  <div class="col-md-4">
                 <span>
                      <input type=”text” class="form-control border-input" placeholder="Fabric Description" v-model="x.description"></span>
                  </div>
                </div>
              </div>

还有我的控制器：

 watch: {
      fabric_arr: {
        handler : function (val) {
          console.log("val");
          console.log(val);
          //val.color="red always";
          this.fabric_arr[0].color="fghjkl"
        },
        deep: true
      }
    }

Answer 1

对于所有正在寻找答案的人，请使用 v-bind:change() 触发更改并在那里操作索引。下面是代码：

<input type=”text” list="idOfDatalist" class="form-control  border-input" placeholder="Fabric Code" v-model="x._id" v-bind:change="inpChangedForCode(x)">
                        <datalist id="idOfDatalist">
                           <option v-for="y in all_fabrics">{{y._id}}</option>
                        </datalist>

如何在vuejs中获取$watch下已更改数组的索引

How to get index of changed array under $watch in vuejs

watch

vue.js

vue-component

vuejs2