Vue.js v-for not rendering component

Question

I have the following issue, for some reason, the v-for will not render at all. Please find the fiddle here https://jsfiddle.net/tadeyemi/k6s4gv85/ I have absolutely no idea why it isn't working. Someone care to shed some light?

<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>

and the JavaScript as follows:

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--;

    }
  }
});

What value is stored in options at the time the component is rendered? — Bassie
– Bassie, Commented May 16, 2020 at 20:19
I ran it of JSFiddle and it showed me the option list, what behavior are you getting and hopping to achieve? — Bernardo Duarte
– Bernardo Duarte, Commented May 16, 2020 at 20:20
@BernardoDuarte On the fiddle, if you comment out the <pre> tag at the bottom, then it stops working, thi sis the bit I don't understand. I am logging the array and I can see that the array is populated. — oluwatyson
– oluwatyson, Commented May 16, 2020 at 20:22
@oluwatyson If options is empty, then the v-for it not going to render anything... — Bassie
– Bassie, Commented May 16, 2020 at 20:24

tony19 · Accepted Answer · 2022-07-15 04:54:32Z

2

There are some issues with your code, but the most prominent is that you break some reactivity rules explained here: https://v2.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

Basically: this.options.push(msg.trim()); would work, while this.options[i]= this.$refs.option.value.trim(); won't

I edited the fiddle a little to make it work: https://jsfiddle.net/63jyw7gz/

edited Jul 15, 2022 at 4:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 16, 2020 at 20:29

Gungnir

3692 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oluwatyson Over a year ago

Thank you very much for that insight! Out of curiosity, what other parts of the code can be improved? I am quite new to Vue.js

Gungnir Over a year ago

Looks like the fiddle didn't save and I corrected this (jsfiddle.net/63jyw7gz). Beside the reactivity, you were incrementing count variable before adding which resulted in first element being undefined (you were modifying a second element on an array that had no elements).

Collectives™ on Stack Overflow

Vue.js v-for not rendering component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related