Question

我正在使用一个对象数组

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

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

<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下获取已更改数组的索引

1 个答案: