Vue가 배열이나 객체의 변경 사항을 감지할 수 없는 문제를 해결하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Vue가 배열이나 객체의 변경 사항을 감지할 수 없는 문제를 해결하는 방법은 무엇입니까?

亚连

Jun 04, 2018 pm 04:32 PM

할 수 없다 정렬 발각

아래에서는 Vue가 배열이나 객체의 변경 사항을 감지하지 못하는 문제를 해결하는 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

예를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <p class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <span>{{numbers[index]}}</span>
  </li>
 </ul>
 </p>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  numbers: [],
  items: [
   {name: &#39;jjj&#39;},
   {name: &#39;kkk&#39;},
   {name: &#39;lll&#39;},
  ]
  },
  methods: {
  handle: function (index) {
   // WHY: 更新数据，view层未渲染，但通过console这个数组可以发现数据确实更新了
   if (typeof(this.numbers[index]) === "undefined" ) {
   // 注：下面这么设置是可以的。例如 
   // var arr = [];
   // arr[3]=3;
   // console.log(arr) //[empty × 3, 3]
    this.numbers[index] = 1; 
   // this.numbers.splice(index,0,1) //用splice方法能同步显示，但得不到想要的效果
   } else {
    this.numbers[index]++;
   // this.numbers.splice(index,1,this.numbers[index]++)
   }
  // console.log(this.numbers)
  }
  }
 });
 
 </script>
</body>
</html>

로그인 후 복사

얻고자 하는 효과는 li를 클릭하여 vm.nymbers[index]가 존재하는지 확인하는 것입니다. 존재하지 않는 경우 1로 설정합니다. 존재한다면 1을 더하세요.

클릭 후 뷰 레이어에서는 숫자가 업데이트되지 않았습니다. 그러나 콘솔 인쇄를 통해 데이터가 업데이트되었지만 뷰 레이어에서는 이를 제때 감지하지 못한 것으로 나타났습니다.

또 다른 변경 사항을 살펴보세요:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <p class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <!--<span>{{numbers[index]}}</span>-->
  </li>
 </ul>
 </p>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  // numbers: [],
  items: [
   {name: &#39;jjj&#39;},
   {name: &#39;kkk&#39;},
   {name: &#39;lll&#39;},
  ]
  },
  methods: {
  handle: function (index) {
   // 不是数组，这里更新数据就可以直接在view层渲染
   this.items[index].name += " success";
  // console.log(this.numbers)
  }
  }
 });
 </script>
</body>
</html>

로그인 후 복사

여기서 뷰 레이어는 시간에 맞춰 업데이트할 수 있지만 배열의 경우 왜 업데이트할 수 없나요?

Vue2.0의 공식 문서를 살펴보세요:

JavaScript 제한으로 인해 Vue는 다음과 같은 변경된 배열을 감지할 수 없습니다.

색인을 사용하여 항목을 직접 설정하는 경우(예: vm.items) [indexOfItem ] = newValue

배열의 길이를 수정하는 경우, 예를 들어 vm.items.length = newLength

첫 번째 유형의 문제를 해결하려면 다음 두 가지 방법을 사용하면 vm과 동일한 효과를 얻을 수 있습니다. items[indexOfItem] = newValue , 상태 업데이트도 트리거합니다:

// Vue.set 
Vue.set(example1.items, indexOfItem, newValue)

로그인 후 복사

// Array.prototype.splice 
example1.items.splice(indexOfItem, 1, newValue)

로그인 후 복사

전역 Vue.set의 별칭인 vm.$set 인스턴스 메서드를 사용할 수도 있습니다.

또는 JavaScript 제한으로 인해 Vue는 객체 속성의 추가 또는 삭제를 감지할 수 없습니다.

var vm = new Vue({
 data: {
 a: 1
 }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

로그인 후 복사

이미 생성된 인스턴스의 경우 Vue는 루트 수준 반응형 속성을 동적으로 추가할 수 없습니다. 그러나 Vue.set(object, key, value) 메서드를 사용하여 중첩된 객체에 반응형 속성을 추가할 수 있습니다. 예를 들면 다음과 같습니다.

var vm = new Vue({ 
 data: { 
 userProfile: { 
  name: &#39;Anika&#39; 
 } 
 } 
})

로그인 후 복사

때로는 Object.sign() 또는 _.extend()를 사용하는 등 기존 개체에 여러 개의 새 속성을 할당해야 할 수도 있습니다. 이 경우 두 개체의 속성을 모두 사용하여 새 개체를 만들어야 합니다. 따라서 새로운 반응형 속성을 추가하려면 다음과 같이 표시하는 대신

Object.assign(this.userProfile, { 
 age: 27, 
 favoriteColor: &#39;Vue Green&#39; 
})

로그인 후 복사

다음과 같이 해야 합니다.

this.userProfile = Object.assign({}, this.userProfile, { 
 age: 27, 
 favoriteColor: &#39;Vue Green&#39; 
})

로그인 후 복사

따라서 위의 예는 다음과 같이 변경해야 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <p class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <span>{{numbers[index]}}</span>
  </li>
 </ul>
 </p>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  numbers: [],
  items: [
   {name: &#39;jjj&#39;},
   {name: &#39;kkk&#39;},
   {name: &#39;lll&#39;},
  ]
  },
  methods: {
  handle: function (index) {
   if (typeof(this.numbers[index]) === "undefined" ) {
    this.$set(this.numbers, index, 1);  //(arr,index,newvalue)
   } else {
    this.$set(this.numbers, index, ++this.numbers[index]);
   }
  }
  }
 });
 </script>
</body>
</html>

로그인 후 복사

완료!

1.17 보충 ---------------------------------

"에 대한 이해 방법" 생성된 인스턴스에서는 Vue가 루트 수준 반응 속성을 동적으로 추가할 수 없습니다."?

예:

var vm=new Vue({ 
 el:&#39;#test&#39;, 
 data:{ 
  //data中已经存在info根属性 
  info:{ 
   name:&#39;小明&#39; 
  } 
 } 
}); 
//给info添加一个性别属性 
Vue.set(vm.info,&#39;sex&#39;,&#39;男&#39;);

로그인 후 복사

위의 방법은 올바른 접근 방식이지만 다음을 수행하면 오류가 보고됩니다.

Vue.set(vm.data,&#39;sex&#39;,&#39;男&#39;)

로그인 후 복사

실제로 데이터에 속성을 직접 추가할 수는 없지만 속성을 추가할 수는 있습니다. 데이터의 객체에.

실제로 vm.data는 정의되지 않았습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7552

Cakephp 튜토리얼

1382

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

MIT의 최신 걸작: GPT-3.5를 사용하여 시계열 이상 탐지 문제 해결 Jun 08, 2024 pm 06:09 PM

오늘은 지난 주 MIT에서 발표한 기사를 소개하고자 합니다. GPT-3.5-turbo를 사용하여 시계열 이상 탐지 문제를 해결하고, 시계열 이상 탐지에서 LLM의 효율성을 초기에 검증한 내용입니다. 전체 과정에 미세한 조정은 없으며, 이상 탐지를 위해 GPT-3.5-turbo를 직접 사용하는 것이 이 글의 핵심이다. LLM이 이상 탐지 작업을 해결하도록 하는 프롬프트 또는 파이프라인입니다. 이 작품을 자세히 소개하겠습니다. 이미지 논문 제목: Large Languagemodelscanbezero-shotanomalydete

foreach 루프를 사용하여 PHP 배열에서 중복 요소를 제거하는 방법은 무엇입니까? Apr 27, 2024 am 11:33 AM

PHP 배열에서 중복 요소를 제거하기 위해 foreach 루프를 사용하는 방법은 다음과 같습니다. 배열을 순회하고 요소가 이미 존재하고 현재 위치가 첫 번째 항목이 아닌 경우 삭제합니다. 예를 들어, 데이터베이스 쿼리 결과에 중복된 레코드가 있는 경우 이 방법을 사용하면 이를 제거하고 중복된 레코드가 없는 결과를 얻을 수 있습니다.

탐지 알고리즘 개선: 고해상도 광학 원격탐사 이미지에서 표적 탐지용 Jun 06, 2024 pm 12:33 PM

01 전망 요약 현재로서는 탐지 효율성과 탐지 결과 간의 적절한 균형을 이루기가 어렵습니다. 우리는 광학 원격 탐사 이미지에서 표적 감지 네트워크의 효과를 향상시키기 위해 다층 특징 피라미드, 다중 감지 헤드 전략 및 하이브리드 주의 모듈을 사용하여 고해상도 광학 원격 감지 이미지에서 표적 감지를 위한 향상된 YOLOv5 알고리즘을 개발했습니다. SIMD 데이터 세트에 따르면 새로운 알고리즘의 mAP는 YOLOv5보다 2.2%, YOLOX보다 8.48% 우수하여 탐지 결과와 속도 간의 균형이 더 잘 이루어졌습니다. 02 배경 및 동기 원격탐사 기술의 급속한 발전으로 항공기, 자동차, 건물 등 지구 표면의 많은 물체를 묘사하기 위해 고해상도 광학 원격탐사 영상이 활용되고 있다. 원격탐사 이미지 해석에서 물체 감지

PHP 어레이 딥 카피(Array Deep Copy) 기술: 다양한 방법을 사용하여 완벽한 카피 달성 May 01, 2024 pm 12:30 PM

PHP에서 배열을 깊게 복사하는 방법에는 json_decode 및 json_encode를 사용한 JSON 인코딩 및 디코딩이 포함됩니다. array_map 및 clone을 사용하여 키와 값의 전체 복사본을 만듭니다. 직렬화 및 역직렬화를 위해 직렬화 및 역직렬화를 사용합니다.

PHP 배열 키 값 뒤집기: 다양한 방법의 성능 비교 분석 May 03, 2024 pm 09:03 PM

PHP 배열 키 값 뒤집기 방법의 성능 비교는 array_flip() 함수가 대규모 배열(100만 개 이상의 요소)에서 for 루프보다 더 나은 성능을 발휘하고 시간이 덜 걸리는 것을 보여줍니다. 키 값을 수동으로 뒤집는 for 루프 방식은 상대적으로 시간이 오래 걸립니다.

데이터 정렬에 PHP 배열 그룹화 기능 적용 May 04, 2024 pm 01:03 PM

PHP의 array_group_by 함수는 키 또는 클로저 함수를 기반으로 배열의 요소를 그룹화하여 키가 그룹 이름이고 값이 그룹에 속한 요소의 배열인 연관 배열을 반환할 수 있습니다.

PHP 배열 심층 복사 모범 사례: 효율적인 방법 발견 Apr 30, 2024 pm 03:42 PM

PHP에서 배열 전체 복사를 수행하는 가장 좋은 방법은 json_decode(json_encode($arr))를 사용하여 배열을 JSON 문자열로 변환한 다음 다시 배열로 변환하는 것입니다. unserialize(serialize($arr))를 사용하여 배열을 문자열로 직렬화한 다음 새 배열로 역직렬화합니다. RecursiveIteratorIterator를 사용하여 다차원 배열을 재귀적으로 순회합니다.

PHP 배열 다차원 정렬 연습: 간단한 시나리오부터 복잡한 시나리오까지 Apr 29, 2024 pm 09:12 PM

다차원 배열 정렬은 단일 열 정렬과 중첩 정렬로 나눌 수 있습니다. 단일 열 정렬은 array_multisort() 함수를 사용하여 열별로 정렬할 수 있습니다. 중첩 정렬에는 배열을 순회하고 정렬하는 재귀 함수가 필요합니다. 실제 사례로는 제품명별 정렬, 판매량 및 가격별 복합 정렬 등이 있습니다.

See all articles

Vue가 배열이나 객체의 변경 사항을 감지할 수 없는 문제를 해결하는 방법은 무엇입니까?

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제