Vue에서 물체를 제대로 보는 방법?

Vue에서 물체를 제대로 보는 방법?

나는 컴퓨터 오브젝트에 Vue watcher를 사용하려고 하는데 전혀 작동하지 않는다.끈만 있으면 제대로 작동하지만, 물건이라면 제대로 작동하지 않는다.나는 Vue 설명서를 따라갔지만 개체가 변경될 때 콘솔에 아무것도 기록되지 않고 있어.Vue Tools에서 확인한 바와 같이 객체와 계산된 속성의 속성이 변하고 있다.내가 뭘 잘못하고 있는 거지?고마워요.

<v-btn small dark @click="test1.asdf = 'blah'">Test</v-btn>
    data() {
      return {
        test1: {},
      }
    },
    computed: {
      test() {
        return this.test1
      }
    },

    watch: {
      test: {
        handler: function(val, oldVal) {
          console.log(oldVal, val);
        },
        deep: true
      }
    }

이 코드를 사용해 보십시오. 코드가 잘 작동함

<template>
  <div id="app">
    {{ test1 }}
    <hr />
    <button @click="test1.asdf = 'blah'">Click</button>
  </div>
</template>

<script >
export default {
  data() {
    return {
      test1: { asdf: "HEY" },
    };
  },
  computed: {
    test() {
      return this.test1;
    },
  },

  watch: {
    test: {
      handler: function (val, oldVal) {
        console.log(oldVal, val);
      },
      deep: true,
    },
  },
};
</script>

네 경우에는 네가 추가해야 할 것 같아..native이렇게 클릭 이벤트가 끝나면@click.native="test1.asdf = 'blah'"

물체를 전부 교체해 보았어그것은 꽤 잘 작동하며, 당신의 사물을 초기화할 필요가 없다.asdf데이터의 속성:

<v-btn small dark @click="test1 = { ...test1, asdf: 'blah'}">Test</v-btn>

확산 구문...test1대상 객체에 다른 속성이 있는 경우 이를 보관할 수 있도록 도와줌으로써 안전하게 추가할 수 있음asdf아무것도 잃을 염려가 없는 재산

JSFiddle: https://jsfiddle.net/vh72a3bs/22/

@BadCoder Objects 및 Arrays는 JavaScript에서 참조로 전달되며, 값은 전달되지 않는다.이것은 당신이 질문에서 하는 것과 같이 객체에 키를 추가할 때, 당신은 단지 같은 객체에 추가하는 것을 의미한다.내용은 바뀌었지만 변수는 바뀌었어.test1여전히 원본 객체를 참조하고 있으며, 원본 객체의 내용이 업데이트되었음을 알지 못한다.감시원이 이 거스름돈을 받지 않는다.추가할 수 있음deep: true다른 해결사가 제안한 것처럼 감시자에게 전달하지만, 이것은 깊이가 두어 단계일 뿐이므로, 중첩된 데이터가 많은 큰 물체를 가지고 있다면 이상적이지 않다.어레이 또는 개체를 처리할 때 감시자를 트리거하는 가장 신뢰할 수 있는 방법은 해당 개체의 새 인스턴스를 생성하는 것이다.물체를 파괴하면 이것을 이룰 수 있다.뭐랄까,

<v-btn small dark @click="test1 = { ...test1, asdf: 'blah'}">Test</v-btn>

새 개체(이전 개체 속성 및 새로운 항목 사용)를 생성하여 감시자를 트리거하기 때문에 작동하십시오.

참조URL: https://stackoverflow.com/questions/70086021/how-to-properly-watch-an-object-in-vue