I have some array of object, when user click button I fetch new array and display display some results.

It works fine until I fetch second array. When I fetch first array with one element and then fetch array with two elements it change (add or remove) only second element.

How I change array value:

fetchAsync(result){
  this.issue = result.body;
}

How issues looks like?

const issues = [
  {
    "id":100,
    "key":"DEMO-123",
    "summary":"Demo issue description",
    "devices":[
      {
        "id":100,
        "name":"iPhone6S",
        "browsers":[
          {
            "id":100,
            "name":"Safari",
            "displayVariants":[
              {
                "id":100,
                "issueKey":"DEMO-123",
                "state":1,
                "browserName":"safari",
                "user":"user-1",
                "landScope":false
              }
            ]
          }
        ]
      }
    ]
  }
]

and the value which was changed is issues[].devices[].browsers[].displayVariants[].state

How to force Vue to rerender this ponent when nested change appear?

[ EDIT ]

I render issues like this:

  <tr v-for="issue in issues">
    <td>
      <div>{{ issue.key }}</div>
      <div class="issue-description">[ {{ issue.summary }} ]</div>
    </td>
    <template v-for="d in issue.devices">
      <td v-for="browser in d.browsers">
        <!--{{ d }}-->
          <device v-for="variant in browser.displayVariants"
                  :variant="variant"
                  :browserId="browser.id"
                  :issueKey="issue.key"
                  :issueId="issue.id"
                  :deviceId="d.id"></device>
      </td>
    </template>
  </tr>

and device template

<template>
  <svg viewBox="0 0 30 30" class="mobileSVG" @click="changeState" :class="[state, {landscape: variant.landScope}]">
    <use xlink:href="#mobile"/>
  </svg>
</template>

I have some array of object, when user click button I fetch new array and display display some results.

It works fine until I fetch second array. When I fetch first array with one element and then fetch array with two elements it change (add or remove) only second element.

How I change array value:

fetchAsync(result){
  this.issue = result.body;
}

How issues looks like?

const issues = [
  {
    "id":100,
    "key":"DEMO-123",
    "summary":"Demo issue description",
    "devices":[
      {
        "id":100,
        "name":"iPhone6S",
        "browsers":[
          {
            "id":100,
            "name":"Safari",
            "displayVariants":[
              {
                "id":100,
                "issueKey":"DEMO-123",
                "state":1,
                "browserName":"safari",
                "user":"user-1",
                "landScope":false
              }
            ]
          }
        ]
      }
    ]
  }
]

and the value which was changed is issues[].devices[].browsers[].displayVariants[].state

How to force Vue to rerender this ponent when nested change appear?

[ EDIT ]

I render issues like this:

  <tr v-for="issue in issues">
    <td>
      <div>{{ issue.key }}</div>
      <div class="issue-description">[ {{ issue.summary }} ]</div>
    </td>
    <template v-for="d in issue.devices">
      <td v-for="browser in d.browsers">
        <!--{{ d }}-->
          <device v-for="variant in browser.displayVariants"
                  :variant="variant"
                  :browserId="browser.id"
                  :issueKey="issue.key"
                  :issueId="issue.id"
                  :deviceId="d.id"></device>
      </td>
    </template>
  </tr>

and device template

<template>
  <svg viewBox="0 0 30 30" class="mobileSVG" @click="changeState" :class="[state, {landscape: variant.landScope}]">
    <use xlink:href="#mobile"/>
  </svg>
</template>

• javascript
• arrays
• vue.js
• vuejs2

• The issue I think is with you render method, please can you paste that? Are you using keys for each dynamic entries? – aks Commented Apr 1, 2017 at 5:46
• @aks I added template which render issues – Alcadur Commented Apr 1, 2017 at 7:11

2 Answers 2

I think adding keys to your list will solve the problem:

https://v2.vuejs/v2/guide/list.html#key

Vue tries to make minimum changes to the DOM, and think that the first item has not changed, so it is not re-rendered. In your case you already have the id, using that as key should solve the issue.

Vue cannot detect the following changes made to the array. Here is the documentation.

1. When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
2. When you modify the length of the array, e.g. vm.items.length = newLength

vm refers to ponent instance.

To overe the limitation 1 do:

Vue.set(items, indexOfItem, newValue)

For limitation 2:

items.splice(newLength)

So in your case you could do

this.$set(this.issues[0].devices[whateverIndex].browsers[anyIndex].displayVariants, indexOfVariant, valueOfVariant)