javascript - Vue.js v-for 不渲染组件

Question

我有以下问题，出于某种原因，v-for 根本不会呈现。请在此处找到 fiddle 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

您的代码存在一些问题，但最突出的是您违反了此处解释的一些 react 性规则:https://vuejs.org/v2/guide/reactivity.html#For-Arrays

Vue cannot detect the following changes to an array:

When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue When you modify the length of the array, e.g. vm.items.length = newLength

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

我稍微编辑了 fiddle 以使其工作: https://jsfiddle.net/63jyw7gz/