상태 변경시 Vue 목록 항목이 다시 렌더링되지 않음

Question

사용자가 버튼을 클릭하면 새 배열을 가져 와서 몇 가지 결과를 표시하는 객체 배열이 있습니다.

두 번째 배열을 가져올 때까지 제대로 작동합니다. 한 요소로 첫 번째 배열을 가져온 다음 두 요소로 배열을 가져 오면 두 번째 요소 만 변경 (추가 또는 제거)합니다.

내가 배열 값을 변경하는 방법 : issues의 모습을 어떻게

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

?

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

및 변경된 값은 issues[].devices[].browsers[].displayVariants[].state

어떻게 중첩 변화가 나타날 때이 구성 요소를 다시 쓰게 뷰를 강제하는 것입니다? 이 같은

---

[편집]

내가 렌더링 문제 :

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

Answer 1

을 할 수있는 내가 목록에 키를 추가 생각 문제를 해결할 것입니다 :

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

vue는 DOM에 최소한의 변경을 시도하고 첫 번째 항목이 변경되지 않았다고 생각하여 다시 렌더링되지 않습니다. 귀하의 경우 이미 id을 사용하고 있으며이를 키로 사용하여 문제를 해결할 수 있습니다.

Answer 2

이 뷰가 배열로 만들어 다음과 같은 변화를 감지 할 수

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

및 device 템플릿입니다. 여기는 documentation입니다. 직접 인덱스, 예를 들어,이있는 항목을 설정

1. vm.items [indexOfItem] = newValue
2. 예를 들어, 배열의 길이를 수정할 때. vm.items.length =는 newLength

vm 컴포넌트 인스턴스를 지칭한다.

제한 (1)을 극복하려면 수행

Vue.set(items, indexOfItem, newValue) 

제한 2의 경우 :

이

items.splice(newLength) 

그래서 경우에 당신이

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