vue 에서 데 이 터 를 수 정 했 지만 보기 가 업데이트 되 지 않 은 경우 해결
1.v-for 가 옮 겨 다 니 는 배열 은 배열 내용 이 arr[0].xx=xx 로 데 이 터 를 변경 할 때 vue 가 감지 할 수 없습니다.
배열 데이터 변동:우 리 는 특정한 방법 으로 배열 을 조작 하고 데 이 터 를 변동 할 때 어떤 방법 은 vue 에 의 해 감 측 되 지 못 하고 어떤 방법 은 가능 하 다.
Vue 는 여러 개의 배열 조작 함 수 를 포장 하고 이런 방법 으로 조작 한 배열 을 사용 하면 데이터 가 변동 할 때 vue 에 의 해 검 측 됩 니 다.
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
vue 2.0 은 Vue.set(items,indexOfItem,newValue)를 관측 할 수 있 는 방법 도 추가 했다.
filter(), concat(), slice() 。원본 배열 은 바 뀌 지 않 지만 항상 새 배열 로 돌아 갑 니 다.비 변이 방법 을 사용 할 때,새 배열 로 오래된 배열 을 교체 할 수 있다.
Vue 는 다음 과 같은 변 동 된 배열 을 감지 할 수 없습니다.
① 색인 을 이용 하여 항목 을 직접 설정 할 때 vm.items[indexOfItem]=newValue
② 배열 의 길 이 를 수정 할 때,예 를 들 어 vm.items.length=newLength
말 이 많 지 않 습 니 다.코드 를 올 리 고 효과 도 를 첨부 합 니 다.
<body>
<div id="app">
<ul>
<li v-for="(item,index) in gc">
<span>{{item.name}}-{{index}}</span>
<span>{{item.age}}-{{index}}</span>
</li>
</ul>
<button @click="add">click</button>
</div>
<script>
new Vue({
el:'#app',
data:{
gc:[
{name:'zhangsan',age:10},
{name:'lisi',age:21},
{name:'wangwu',age:22},
{name:'wangwu',age:22}
]
},methods:{
// gc[0] lisi,
add(){
this.gc[0] ={name:'lisi',age:22}
}
}
})
</script>
</body>
위 Vue 에서 데이터 변동 을 감지 할 수 없 는 배열 의 2 가지 방법 해결 방법
코드 의 add()방법 을 다음 으로 변경 합 니 다.
add(){
// this.gc[0] ={name:'lisi',age:22} // vue
Vue.set(this.gc,0,{name:'lisi',age:22}) // vue ，
}
이상 의 해결 vue 에서 데 이 터 를 수 정 했 지만 보기 가 업데이트 되 지 않 는 상황 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 도 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
