v-show 및 v-if가 어레이가 아닌 개체의 부울 변경에 즉시 응답하는 이유는 무엇입니까?

v-show 및 v-if가 어레이가 아닌 개체의 부울 변경에 즉시 응답하는 이유는 무엇입니까?

질문을 클릭하면 답변이 표시되는 동적 FAQ 페이지를 작성할 때 이 이상한 동작을 발견했습니다.

답변의 개폐를 제어하는 부울이 객체에 저장되면 보기가 즉시 업데이트되고 답변이 즉시 표시되거나 숨겨집니다.그러나 목록에 저장된 경우 보기가 다른 방법으로 업데이트될 때까지 답변이 표시되지 않거나 숨겨지지 않습니다.

다음은 문제를 표시하는 바이올린입니다.https://jsfiddle.net/masterofginseng/ffqt9n4y/6/

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="faq">
  <div>This responds immediately</div>
  <hr>
  <div v-for="questionObj in questions1">
    <div style="cursor: pointer;" @click="questionObj.open = !questionObj.open">
      {{ questionObj.question }}
    </div>
    <div style="color: blue;" v-show="questionObj.open">{{ questionObj.answer }}</div>
  </div>
  <br>
  <br>
  <div>This doesn't respond until the view is updated in some other way (ex. by clicking on one of the questions above)</div>
  <hr>
  <div v-for="questionarray in questions2">
    <div style="cursor: pointer;" @click="questionarray[2] = !questionarray[2]">
      {{ questionarray[0] }}
    </div>
    <div style="color: blue;" v-show="questionarray[2]">{{ questionarray[1] }}</div>
  </div>
</div>

자바스크립트:

new Vue({
  el: "#faq",
  data: {
    questions1: [{
      question: "How big is it?",
      answer: "very big",
      open: false
    }, {
      question: "How small is it?",
      answer: "very small",
      open: false
    }],
    questions2: [
      ["How big is it?", "very big", false],
      ["How small is it?", "very small", false]
    ]
  }
});

Javascript의 제한으로 인해 Vue는 다음과 같은 구문을 가진 항목의 값 변경을 감지할 수 없습니다.

questionarray[2] = !questionarray[2]

여기를 참조해 주세요.https://vuejs.org/v2/guide/list.html#Array-Change-Detection

위의 링크에서 설명한 바와 같이,splice()대신:

questionarray.splice(2, 1, !questionarray[2])

이는 리스트 렌탈에 관한 경고 때문입니다.

다음과 같이 시도합니다.

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="faq">
  <div>This responds immediately</div>
  <hr>
  <div v-for="questionObj in questions1">
    <div style="cursor: pointer;" @click="questionObj.open = !questionObj.open">
      {{ questionObj.question }}
    </div>
    <div style="color: blue;" v-show="questionObj.open">{{ questionObj.answer }}</div>
  </div>
  <br>
  <br>
  <div>This doesn't respond until the view is updated in some other way (ex. by clicking on one of the questions above)</div>
  <hr>
  <div v-for="questionarray in questions2">
    <div style="cursor: pointer;" @click="myMethod(questionarray)">
      {{ questionarray[0] }}
    </div>
    <div style="color: blue;" v-show="questionarray[2]">{{ questionarray[1] }}</div>
  </div>
</div> 

대본

new Vue({
  el: "#faq",
  data: {
    questions1: [{
      question: "How big is it?",
      answer: "very big",
      open: false
    }, {
      question: "How small is it?",
      answer: "very small",
      open: false
    }],
    questions2: [
      ["How big is it?", "very big", false],
      ["How small is it?", "very small", false]
    ]
  },
  methods:{
      myMethod(questionArray){
        this.$set(questionArray, 2, !questionArray[2]);
    }
  }
});

여기 jsFiddle이 있습니다.

또는 Linus borg가 대답한 것처럼 덜 상세한 버전:

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="faq">
  <div>This responds immediately</div>
  <hr>
  <div v-for="questionObj in questions1">
    <div style="cursor: pointer;" @click="questionObj.open = !questionObj.open">
      {{ questionObj.question }}
    </div>
    <div style="color: blue;" v-show="questionObj.open">{{ questionObj.answer }}</div>
  </div>
  <br>
  <br>
  <div>This doesn't respond until the view is updated in some other way (ex. by clicking on one of the questions above)</div>
  <hr>
  <div v-for="questionarray in questions2">
    <div style="cursor: pointer;" @click="questionarray.splice(2, 1, !questionarray[2])">
      {{ questionarray[0] }}
    </div>
    <div style="color: blue;" v-show="questionarray[2]">{{ questionarray[1] }}</div>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/44544061/why-does-v-show-and-v-if-respond-immediately-to-boolean-changes-in-objects-but