CODEWITHSUNDEEP
javascripthtmlvue.js
Çağlar Bingöl
Çağlar Bingöl

Reputation: 35

Vue v-for not update model variable

i try to render page with dynamic properties. my code

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <div v-for="current in 2" :key="current">
    <p :style="currentObject.color">
      {{ current  }}
      {{ currentObject.text }}
    </p>
  </div>
</div>

script is

let vm = new Vue({
  el : "#root",
  created: function () {
  console.log(this.current)
  },
  data : {
    current : 0,
    arrs : [
      {
        color : "background-color: blue;",
        text : "Dabodee Dabodai"
      },
      {
        color : "background-color: red;",
        text : "Angry"
      },
      {
        color : "background-color: green;",
        text : "See it works!"
      }
    ]
  },
  computed : {
    currentObject : function() {
      return this.arrs[this.current];
    }
  }
});

i want to p tag with different color and container object text via currentObject but when render the page, computed act likes current is 0 always. output is blue and text from currentObject is "Dabodee Dabodai"

what am i doing wrong?

Upvotes: 0

Views: 892

Answers (4)

Richard
Richard

Reputation: 722

Computed property is not the best option here as it will get calculated whenever it changes, meaning that if you iterate through an array the computed value will change on every iteration and at the end you will have all instances with the same value:

What you want is to iterate through your array or access the desired location; so the the most simple approach will work here. As someone already state the for loop will start at 1 so you want to do a -1 to start from the first array location:

<div id="root">
  <div v-for="current in 3" :key="current">
    <p :style="arrs[current-1].color">
      {{ current  }}
      {{ arrs[current-1].text }}
    </p>
  </div>
</div>

If per the update you want to keep it reactive you can track changes on the arrs value and take an action using a watch to refresh certain item when the array is updated

Upvotes: 1

julianstark999
julianstark999

Reputation: 3616

The Problem is, that in your case the computed Property currentObject is accesible in the complete Vue instance. this.current is 0 and doesn't get updated, so currentObject always returns the same value.

If you really want to access the properties throught the v-for loop, with in 2 you must keep in mind the loop will always starts with 1.

The best practice would be to loop the array with (current, index) in arrs

let vm = new Vue({
  el : "#root",
  data : {
    arrs : [
      {
        color : "background-color: blue;",
        text : "Dabodee Dabodai"
      },
      {
        color : "background-color: red;",
        text : "Angry"
      },
      {
        color : "background-color: green;",
        text : "See it works!"
      }
    ]
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <div v-for="(current, index) in arrs" :key="index">
    <p :style="current.color">
      {{ current.text }}
    </p>
  </div>
</div>

Upvotes: 0

Asimple
Asimple

Reputation: 650

First of all your v-for variable name is wrong, you already have current in data, also computed property is not attached to v-for loop, here is working example:

Template:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js></script>
<div id="root">
    <div v-for="(item, index) in arrs" :key="index">
        <p :style="{ backgroundColor: item.color }">
            {{ index  }}
            {{ item.text }}
        </p>
    </div>
</div>

and Vue code:

let vm = new Vue({
  el : "#root",
  data : {
    arrs : [
      {
        color : "blue",
        text : "Dabodee Dabodai"
      },
      {
        color : "red",
        text : "Angry"
      },
      {
        color : "green",
        text : "See it works!"
      }
    ]
  }
});

Upvotes: 0

KaranV
KaranV

Reputation: 312

You have a syntax error in the v-for

v-for loops through an array and in javascript syntax in is used to loop through an array

let arrs = [
      {
        color : "background-color: blue;",
        text : "Dabodee Dabodai"
      },
      {
        color : "background-color: red;",
        text : "Angry"
      },
      {
        color : "background-color: green;",
        text : "See it works!"
      }
    ]
for(i in arrs){
console.log(arrs[i])
}

Corrected code

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <div v-for="current in arrs" :key="current">
    <p :style="currentObject.color">
      {{ current  }}
      {{ currentObject.text }}
    </p>
  </div>
</div>

after this modification this above snippet should work

Upvotes: 0

Related Questions