Vue.js v-for 不渲染组件答案

【问题标题】：Vue.js v-for not rendering componentVue.js v-for 不渲染组件
【发布时间】：2020-05-16 20:16:01
【问题描述】：

我有以下问题，由于某种原因，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--;

    }
  }
});

【问题讨论】：

渲染组件时options中存储了什么值？
我用 JSFiddle 运行它，它向我展示了选项列表，你正在实现什么行为？

@BernardoDuarte 在小提琴上，如果你注释掉底部的

 标签，它就会停止工作，这就是我不明白的一点。我正在记录数组，我可以看到数组已填充。

@Bassie 开始时选项为空
@oluwatyson 如果 options 为空，那么 v-for 它不会渲染任何东西...

标签： javascript vue.js

【解决方案1】：

您的代码存在一些问题，但最突出的是您违反了此处解释的一些反应性规则：https://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/

【讨论】：

非常感谢您的洞察力！出于好奇，代码的其他哪些部分可以改进？我对 Vue.js 很陌生
看起来小提琴没有保存，我更正了这个 (jsfiddle.net/63jyw7gz)。除了反应性之外，您在添加之前增加了 count 变量，这导致第一个元素未定义（您正在修改没有元素的数组上的第二个元素）。