Vuejs and Vue set update array

Question

I m new to Vuejs  Made something  but I don t know it s the simple   right way   what I want  I want some dates in an array and update them on a event  First I tried Vue set  but it dind t work out  Now after changing my array item   this items index    val  this items push      I push   nothing to the array and it will update   But sometimes the last item will be hidden  somehow    I think this solution is a bit hacky  how can I make it stable   Simple code is here    x000D   x000D  new Vue   x000D    el    app   x000D    data    x000D     f   DD-MM-YYYY   x000D      items    x000D         10-03-2017   x000D         12-03-2017  x000D        x000D       x000D    methods    x000D       x000D      cha  function index  item  what  count    x000D       console log item     index  gt      index   x000D        val   moment this items index   this f  add count  what  format this f   x000D      this items index    val  x000D        this items push    x000D        console log  arr length       this items length   x000D        x000D      x000D     x000D  ul   x000D    list-style-type  none  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 1 0 11 vue min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs moment js 2 10 6 moment min js  gt  lt  script gt  x000D   lt div id  app  gt  x000D     lt ul gt  x000D       lt li v-for   index  item  in items  gt  x000D       lt br gt  lt br gt  x000D         lt button v-on click  cha index  item   day   -1   gt  x000D        - day lt  button gt  x000D           item    x000D         lt button v-on click  cha index  item   day   1   gt  x000D          day lt  button gt  x000D       lt br gt  lt br gt  x000D       lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

One alternative - and more lightweight approach to your problem - might be, just editing the array temporarily and then assigning the whole array back to your variable. Because as Vue does not watch individual items it will watch the whole variable being updated.

So you this should work as well:

var tempArray[];

tempArray = this.items;

tempArray[targetPosition]  = value;

this.items = tempArray;

This then should also update your DOM.

User · Answer

As stated before - VueJS simply can t track those operations array elements assignment   All operations that are tracked by VueJS with array are here  But I ll copy them once again    push   pop    shift    unshift    splice    sort    reverse     During development  you face a problem - how to live with that      push    pop    shift    unshift    sort   and reverse   are pretty plain and help you in some cases but the main focus lies within the splice    which allows you effectively modify the array that would be tracked by VueJs  So I can share some of the approaches  that are used the most working with arrays   You need to replace Item in Array       note - findIndex might be replaced with some    filter    forEach       or any other function approach if you need     additional browser support  or you might use a polyfill const index   this values findIndex item   gt              return  replacementItem id     item id             this values splice index  1  replacementItem    Note  if you just need to modify an item field - you can do it just by   this values index  itemField   newItemFieldValue   And this would be tracked by VueJS as the item Object  fields would be tracked   You need to empty the array   this values splice 0  this values length    Actually you can do much more with this function splice   - w3schools link You can add multiple records  delete multiple records  etc   Vue set   and Vue delete    Vue set   and Vue delete   might be used for adding field to your UI version of data  For example  you need some additional calculated data or flags within your objects  You can do this for your objects  or list of objects in the loop     Vue set plan   editEnabled   true     or this  set    And send edited data back to the back-end in the same format doing this before the Axios call    Vue delete plan   editEnabled      or this  delete

User · Answer

EDIT 2   For all object changes that need reactivity use Vue set object  prop  value  For array mutations  you can look at the currently supported list here     EDIT 1  For vuex you will want to do Vue set state object  key  value     Original  So just for others who come to this question  It appears at some point in Vue 2   they removed this items  set index  val  in favor of this  set this items  index  val    Splice is still available and here is a link to array mutation methods available in vue link

User · Answer

Observe object and array reactivity here  https   vuejs org v2 guide reactivity html

User · Answer

VueJS can t pickup your changes to the state if you manipulate arrays like this   As explained in Common Beginner Gotchas  you should use array methods like push  splice or whatever and never modify the indexes like this a 2    2 nor the  length property of an array    x000D   x000D  new Vue   x000D    el    app   x000D    data    x000D      f   DD-MM-YYYY   x000D      items    x000D         10-03-2017   x000D         12-03-2017  x000D        x000D       x000D    methods    x000D   x000D      cha  function index  item  what  count    x000D        console log item     index  gt      index   x000D        val   moment this items index   this f  add count  what  format this f   x000D   x000D        this items  set index  val  x000D        console log  arr length       this items length   x000D        x000D      x000D     x000D  ul   x000D    list-style-type  none  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 1 0 11 vue min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs moment js 2 10 6 moment min js  gt  lt  script gt  x000D   lt div id  app  gt  x000D     lt ul gt  x000D       lt li v-for   index  item  in items  gt  x000D         lt br gt  lt br gt  x000D         lt button v-on click  cha index  item   day   -1   gt  x000D        - day lt  button gt     item    x000D         lt button v-on click  cha index  item   day   1   gt  x000D          day lt  button gt  x000D         lt br gt  lt br gt  x000D       lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

[javascript] Vuejs and Vue.set(), update array

Examples related to javascript

Examples related to vue.js

Examples related to momentjs

Examples related to vuejs2