v-sphere가 어레이 컨텐츠의 변경을 감지하지 못함(vue js)

v-sphere가 어레이 컨텐츠의 변경을 감지하지 못함(vue js)

나는 지금 이 상황을 바꾸려고 하고 있습니다.id사용자가 버튼을 클릭한 후 이미지를 표시합니다.처음에id요소 중 하나는 B0_h여야 하지만 사용자가 버튼을 클릭한 후 배열 값이 다음과 같이 변경됩니다.true처음에 모든 어레이 값은 다음과 같습니다.false단, 어레이 내의 요소 값이 참이 되면idB0_v로 변경해야 합니다.

Vue dev 툴을 사용하여 어레이의 값이 예상대로 변화하고 있음을 알 수 있었습니다.v-bind이 변경을 검출할 수 없습니다.에서v-bind관점, 가치B[0]정지해 있다false그 결과,id아직 B0_h 입니다.

템플릿은 다음과 같습니다.

<template>
    <div>
       <button type="button" id="button0" v-on:click="toggle('B0')"></button>
       <img src="../assets/img1.png" alt="A" v-bind:id="[A[0] === true ? 'A0_v' : 'A0_h']" >
       <img src="../assets/img2.png" alt="B" v-bind:id="[B[0] === true ? 'B0_v' : 'B0_h']">
    </div>
</template>

제 대본은 다음과 같습니다.

<script>
export default {
  name: 'Demo',
  props: {},
  data: function(){
      return{
          A: [false,false,false,false,false,false,false,false,false],
          B: [false,false,false,false,false,false,false,false,false],
          playerTurn: true;
      }
  },
  methods: 
  {
    toggle(x)
    {
      if(x == 'B0' && this.playerTurn)
      {
        this.B[0] = true;
      }
    }
  }
}
</script>

내가 여기서 뭘 잘못하고 있는지 알아?

이는 어레이 및 개체에서 Vue에 의한 변경 처리 때문입니다.Vue는 당신이 변경한 내용을 추적하지 않을 겁니다.이를 위해 다음과 같은 특별한 방법을 제공합니다.set변경되어야 하는 배열(또는 개체), 인덱스 및 설정되어야 하는 값의 3가지 인수를 사용합니다.

이 예에서는 다음과 같습니다.

Vue.set(this.B, 0, true);

다음 행 대신 이 행을 사용합니다.

this.B[0] = true;

자세한 내용은 공식 문서를 참조하십시오.다음은 간단한 발췌입니다.

Vue.set ( target, propertyName/index, value )인수:

• {개체 | 어레이} 타겟
• {string | number} 속성 이름/인덱스
• {any} 값

반환값: 설정값.

사용방법:

반응형 개체에 속성을 추가하여 새 속성도 반응형인지 확인하므로 뷰 업데이트를 트리거합니다.Vue가 정상적인 속성 추가(예: this.myObject.newProperty = 'hi')를 감지할 수 없기 때문에 반응형 개체에 새 속성을 추가하려면 이 옵션을 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/58587450/v-bind-isnt-detecting-the-change-in-array-content-vue-js