亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue.js v-for not rendering component

Vue.js v-for not rendering component

米脂 2022-08-18 16:35:04
我有以下問題,由于某種原因,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--;    }  }});
查看完整描述

1 回答

?
郎朗坤

TA貢獻1921條經驗 獲得超9個贊

你的代碼存在一些問題,但最突出的是你違反了這里解釋的一些反應性規則: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/


查看完整回答
反對 回復 2022-08-18
  • 1 回答
  • 0 關注
  • 129 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號