For循环和奇怪的Vue行为

Question

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

所以我试了jQuery.append，但后来有一个v-model没有被发现的问题。

于是，我就实现使用Vueif-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而不是模板，但结果仍然相同，但似乎是触发某种呈现的语句？

任何人都可以请解释，所以我可以更好地理解为什么会发生这种情况？

**更新**

我将它缩小，以避免混淆：

<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公司没有注意到这是一个好主意：因为它只能通过notices array mutations阵列方法制成的

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

。

在循环中引用extraAddons让Vue知道某些内容已经改变。如果你使用赋值函数像

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

Vue公司应像预期的那样，而不需要你来指extraAddons。

Answer 2

那么，你应该问这个问题第一，我的状态会经常发生变化？

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

也就是阅读更多关于Conditional Rendering