Vue.js.$set이 함수가 아닙니다.

Vue.js.$set이 함수가 아닙니다.

vuejs에 저장된 데이터를 수정하려고 합니다.$set기능.하지만 다음과 같은 오류가 발생했습니다.TypeError: app.messageBox.$set is not a function.

다음은 앱과 messageBox를 정의하는 방법에 대한 코드입니다.

app = new Vue({
    el: '#app',
    data: {
        messageBox: [{
            id: 1,
            message: 'first'
        }, {
            id: 2,
            message: 'second'
        }]
    }
});

다른 js 파일에서 messageBox의 데이터를 수정하려고 합니다.

function test() {
    app.messageBox.$set(0, {message: 'aaa'});
}

올바른 구문은 입니다.컴포넌트 코드 또는 단일 파일컴포넌트 내에서 사용하는 경우 다음과 같은 에일리어스를 사용할 수 있습니다.

Vue.set(app.messageBox, 0, { message: 'outside component' });

// or when you don't access to `Vue`:
app.$set(app.messageBox, 0, { message: 'outside component' });

// or when `this` is the Vue instance:
this.$set(this.messageBox, 0, { message: 'inside component' })

const app = new Vue({
  el: '#app',
  data() {
    return {
      messageBox: [{
        id: 1,
        message: 'first'
      }, {
        id: 2,
        message: 'second'
      }]
    };
  },
  mounted() {
    setTimeout(() => {
      this.$set(this.messageBox, 0, { message: 'inside component' })
    }, 1000)
  }
});

setTimeout(() => {
  Vue.set(app.messageBox, 0, { message: 'outside component' });
}, 2000);

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>

<div id="app">
  <p v-for="msgBox of messageBox">{{msgBox.message}}</p>
</div>

다음 예시는 어레이 카에서 제품의 QTY를 업데이트하는 것입니다.

 const indice = this.car.findIndex((pr) => pr.id === product.id);
                    if(indice===-1){
                        product.qty = 1
                        this.car.push(product)
                    }else{
                        //Vue no detectara cambios en el array si se actualiza por indice https://stackoverflow.com/a/59289650/16988223
                        //this.car[indice].qty++
                        const productUpdated = product 
                        productUpdated.qty++
                        this.$set(this.car, indice, productUpdated)
                    }

언급URL : https://stackoverflow.com/questions/46821414/vue-js-set-is-not-a-function