Vue.js .$set is not a function

Question

I'm trying to modify the data that stored in vuejs by using $set function. But I got this error: TypeError: app.messageBox.$set is not a function.

Here is the code about how I define app and messageBox:

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

and in another js file, I try to modify the data in messageBox:

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

Answer 1

The correct syntax is Vue.set(target, index, value). When used inside component code or single-file-components, you could use the equivalent alias: this.$set(target, index, value):

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/[email protected]/dist/vue.min.js"></script>

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