Javascript 对于循环和奇怪的Vue行为

我正在做一个项目，我想在点击

按钮时添加更多的
输入
字段

所以我尝试了
jQuery.append
，但是没有检测到
v-model
的问题

因此，我尝试使用
Vue
if语句实现同样的功能，我发现只需将对象添加到变量中，确定首先列出的
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>

问题是这一切都很顺利。当我按下
按钮
添加额外的块时，它被插入。但如果我删除：

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

你应该先问这个问题，我的情况会经常改变吗

如果条件在运行时不太可能改变，因为切换成本较高，那么我们使用v-if，但在您的情况下，条件经常改变，因此它不是最佳选择，因此最好使用v-show，因为它是我们需要经常切换的情况下的最佳选择。v-show的用法也与v-if相同

阅读更多关于Vue的信息也是一个好主意，Vue没有注意到这一点：

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

因为它只通过数组方法生成

在循环中引用
extraAddons
，可以让Vue知道发生了变化。如果你用了一个像

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

Vue应按预期运行，无需参考
附加插件
我一定会考虑改用v-show，谢谢！但是我的问题仍然没有解决——为什么内部的v-if语句决定是否重新计算外部for循环。这对我来说没有意义。你有一个
v-else
，这取决于
v-if
的存在。谢谢@RoyJ。我现在更新了帖子，也许可以更好地解释我的问题。这不是一个很好的例子，但我只是想知道为什么以及如何在我学习的过程中更好地理解Vue。据我所知，v-else不相关？
vm.plate.props.products[number] = {nobb:'',number:''};

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