Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

Tags:

laravel

vue.js

I am a bit confused using VueJS2. I added a few variables to the data container for sending it to my API. That works fine but Vue is throwing me a warning/error message which I don't know how to solve:

Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

var app = new Vue({
    el: '#app',
    data: {
        incidentReference: '',
        streetName: '',
        latitude: '',
        longitude: '',
        featureTypeId: 1,
        archived: 0
    },

    computed: {
        href() {
            return '#' + this.name.toLowerCase().replace(/ /g, '-');
        }
    },

    mounted: function () {
        this.getIncidents();
    },

    methods: {
        onSubmit() {
            axios.post('/api/v1/incidents', this.$data)
                .then(response => alert('Success'))
                .catch(error => {
                    console.log(error.response);
                })
        },

        getIncidents: function() {
            console.log('getIncidents');
            var self = this;
            axios.get('/api/v1/incidents').then(function(response) {
                // set data on vm
                console.log(response.data);
                var incidentsReceived = response.data.data.map(function (incident) {
                    return incident;
                });
                Vue.set(self, 'incidents', incidentsReceived);
            });
        }
    }
});
like image 316
sesc360 Avatar asked Feb 07 '17 17:02

sesc360


People also ask

What is reactive property in Vue?

Vue comes with the reactive method, which is used to create a reactive state in JavaScript or Vue. Basically, the reactive method is just a function that creates a proxy and wraps it around provided data objects, ultimately turning it into a proxied object.

What is reactive dependency in Vue?

Reactive dependencies are those that are observable, like data properties or Vuex state. Non-reactive dependencies would be something like a simple variable or something from local-storage.

Are sets reactive in Vue?

We can use JavaScript maps and sets as reactive properties in Vue.


2 Answers

You're creating a new reactive property on the response of your API

Vue.set(self, 'incidents', incidentsReceived);

Not sure if you misspelled property's name or forget to create that property. Just use an existing property on you data section

Vue.set(self, 'incidentReference', incidentsReceived); //change property name

or

data: {
    incidents: null, //or create this property
},  
like image 126
AldoRomo88 Avatar answered Sep 20 '22 11:09

AldoRomo88


In my case during unit testing using Jest, I was setting selected but didn't have on component so got this error.

  wrapper.setData({
  selected: recipients,
});

So created the property on component and then it's working fine.

like image 22
Muhammad Waqas Dilawar Avatar answered Sep 17 '22 11:09

Muhammad Waqas Dilawar