javascript - vue 변수 업데이트가 dom 업데이트를 트리거할 수 없습니다.

Question

아래와 같이 v-for를 사용하여 이 itemList를 html로 렌더링하고, 각 항목의 active를 통해 이 항목에 해당하는 html을 표시(v-show)할지 여부를 제어합니다.
그런데 이렇게 이벤트 메소드를 통해 Item을 선택하고 itemList를 변경하면 dom이 업데이트되지 않나요? ? ?

으아악

Answer 1

으아악

Answer 2

vue.itemList[index].active = true로 변경된 vue

Answer 3

selectItem에 console.log(index)에 대한 값이 있습니까? 이 vue 객체를 얻으려면 이를 사용해야 합니다

Answer 4

데이터 수정 방법이 틀려서 오류가 보고되지 않나요?

으아악

Answer 5

제공해주신 데이터 형식에 따라 시도해 보았는데 코드는 다음과 같습니다
`<p id="app">
<li v-for="(item,index) in itemList" v- on:click="selectItem(index)" v-if="item.active">

으아악

</li>
</p>
<script>

으아악

</script>`

Answer 6

vue 내부에서는 vue를 통하지 않습니다. 이를 통해 vue의 인스턴스를 저장하기 위해 변수를 사용하더라도

으아악

Answer 7

JS 코드가 충분히 우아하지 않더라도 여기서는 객체 대신 배열을 사용하는 것이 더 적합하지만 DOM이 렌더링되지 않는 것은 잘못된 것이 아니라고 생각합니다. 여기서는 문제가 아닙니다. 선택 데이터의 단방향 흐름 문제와 같은 양식 컨트롤에 바인딩되어야 합니다.

Answer 8

키 값 모드는 vue로 모니터링할 수 없으며, vue는 $set 메소드를 제공합니다. . 삭제에는
selectItem: function(index) {

도 필요합니다. 으아악

},

Answer 9

Vue를 이것으로 바꿔서 사용해 보세요

Answer 10

this.itemList.splice(index, 1, Object.sign({}, this.itemList[index], { active: true }))