简体   繁体   中英

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?

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

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

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!"
      }
    ]
  }
});

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM