javascript - For 循环和奇怪的 Vue 行为

Question

我正在做一个项目，我想在点击按钮时添加更多的input字段。

所以我尝试了 jQuery.append 但随后出现了 v-model 未被检测到的问题。

所以我尝试使用 Vue if-statement 来实现同样的事情，我发现只需将对象添加到变量来决定有多少input 字段列在第一位。

但后来我注意到一些奇怪的事情，我想知道这是偶然的还是应该以这种方式工作。

所以首先 - 这是 html:

<div id="app-edit" class="form-group">
  <template v-if="plate.props.products !== undefined">
    <div class="form-group form-row" v-for="(extra, index) in plate.props.products">
      <div class="col">
        <label for="productExtrasNobb0" v-if="index == 0">NOBB number</label>
        <input type="text" class="form-control" v-bind:id="'productExtrasNobb' + index" v-model="plate.props.products[index].nobb">
      </div>
      <div class="col">
        <label for="productExtrasAmount0" v-if="index == 0">Amount</label>
        <input type="text" class="form-control" v-bind:id="'productExtrasNumber' + index" v-model="plate.props.products[index].number">
      </div>
      <div class="col-auto d-flex align-items-end">
        <button type="button" class="btn btn-danger"><i class="fa fa-minus"></i></button>
      </div>
    </div>
    <template v-if="extraAddons > 0"></template>
    <button type="button" class="btn btn-info" @click="addExtra(plate.props.products.length)"><i class="fa fa-plus mr-2"></i>Add</button>
  </template>
  <template v-else>
    <button type="button" class="btn btn-info" @click="addExtra(plate.props.products.length)"><i class="fa fa-plus mr-2"></i>Add</button>
  </template>
</div>

这是相关的 Vue JS:

var app = new Vue({
  el: '#app-edit',
  data: {
    extraAddons: 0,
    plate: {
      props: {
        products: [],
      }
    }
  },
  methods: {
    addExtra: function(number) {
      vm = this;
      vm.plate.props.products[number] = {nobb:'',number:''};
      vm.extraAddons++;
    }
  }
});

问题是这工作正常。当我按下 按钮 添加一个额外的 block 时，它被插入。但是如果我删除:

<template v-if="extraAddons > 0"></template>

它不工作。

为什么这很重要？我使用什么标签并不重要——它可能是 p 而不是模板，结果仍然相同，但似乎 v-if 语句正在触发某种渲染？

谁能解释一下，以便我更好地理解为什么会这样？

**更新**

我将缩小范围以避免混淆:

<div id="app-edit" class="form-group">
  <template v-if="plate.props.products !== undefined">
    <div class="form-group form-row" v-for="(extra, index) in plate.props.products">
    </div>
    <!-- Without the next line the v-for loop is not re-rendered after adding content to plate.props.products -->
    <template v-if="extraAddons > 0"></template> 
  </template>
  <template v-else>
  </template>
</div>

Answer 1

Vue 不会注意到这一点:

vm.plate.props.products[number] = {nobb:'',number:''};

因为它只有notices array mutations通过数组方法制作。

在循环中引用 extraAddons 让 Vue 知道有些东西已经改变了。如果你使用像这样的突变器

vm.plate.props.products.splice(number, 1, {nobb:'',number:''});

Vue 应该按预期运行，而无需引用 extraAddons。