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/