Hello, I am facing an issue with the v-for feature as it is not rendering at all. You can view the fiddle by clicking on this link https://jsfiddle.net/tadeyemi/k6s4gv85/. I am puzzled as to why it's not working. Can anyone provide some insight?
<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>
Here is the JavaScript code:
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--;
}
}
});