Vue.js v-for not rendering component

Question

我有以下问题，由于某种原因，v-for 根本不会呈现。请在这里找到小提琴 https://jsfiddle.net/tadeyemi/k6s4gv85/我完全不知道为什么它不起作用。有人愿意透露一些光芒吗？

<div id="app">
<h1>Finds</h1>
<div>
<input ref="option">
</div>
<button v-if @click="addFind">
New Find
</button> 
<p v-for="(option,idx) in options.slice(1)">
<span @click="removeOption(idx+1)">Option{{idx+1}}: {{option}}</span>
</p>
</div>

和JavaScript如下：

new Vue({
el: '#app',
data: {
options: [],
count:0
},
methods: {
addFind: function () {
var msg = this.$refs.option.value;
console.log(this.options);
if( msg.trim() != "" ){
this.count++;
var i = this.count;
this.options[i]= this.$refs.option.value.trim();
}
},
removeOption:function(index){
this.options.splice(index,1);
this.count--;
}
}
});

Answer 1

你的代码有一些问题，但最突出的是你违反了这里解释的一些反应性规则：https://v2.vuejs.org/v2/guide/reactivity.html#For-Arrays

Vue 无法检测到对数组的以下更改：

当您直接使用索引设置项目时，例如 vm.items[indexOfItem] = newValue 当您修改 数组，例如 vm.items.length = newLength

基本上：this.options.push(msg.trim());会起作用，而this.options[i]= this.$refs.option.value.trim();不会

我稍微编辑了一下小提琴以使其工作：https://jsfiddle.net/63jyw7gz/