Question

我正在开展一个项目，我想在点击input时添加更多button字段。

所以我尝试了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++;
    }
  }
});

事情是这样做得很好。当我按button添加一个额外的块时，它会被插入。但如果我删除：

<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没有注意到这一点：

return

因为它只通过数组方法生成notices array mutations。

在循环中引用vm.plate.props.products[number] = {nobb:'',number:''};可让Vue知道某些内容已发生变化。如果你使用像

这样的mutator

extraAddons

Vue应该按预期运行，而无需参考vm.plate.props.products.splice(number, 1, {nobb:'',number:''});。

Answer 2

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

我们使用v-if如果条件不太可能在运行时改变，因为它有更高的切换成本但在你的情况下，条件经常变化所以它不是真正的最佳选择，所以最好使用v-show对于我们需要经常切换的情况，这是最好的选择。 v-show的使用也与v-if相同。

阅读有关Conditional Rendering

的更多信息也是一个好主意

对于循环和奇怪的Vue行为

2 个答案: