laravel 避免在运行时向 Vue 实例或其根 $data 添加反应性属性 - 在 data 选项中预先声明。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42096009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.
提问by sesc360
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:
我对使用 VueJS2 有点困惑。我向数据容器添加了一些变量，以便将其发送到我的 API。这工作正常，但 Vue 向我抛出了一条警告/错误消息，我不知道如何解决：
Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.
避免在运行时向 Vue 实例或其根 $data 添加反应性属性 - 在 data 选项中预先声明。
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);
});
}
}
});
采纳答案by AldoRomo88
You're creating a new reactive property on the response of your API
您正在为 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 datasection
不确定您是否拼错了属性的名称或忘记创建该属性。只需在您的data部分使用现有属性
Vue.set(self, 'incidentReference', incidentsReceived); //change property name
or
或者
data: {
incidents: null, //or create this property
},
回答by Muhammad Waqas Dilawar
In my case during unit testing using Jest, I was setting selectedbut didn't have on component so got this error.
就我而言，在使用 Jest 进行单元测试期间，我正在设置selected但没有设置组件，因此出现此错误。
wrapper.setData({
selected: recipients,
});
So created the property on component and then it's working fine.
所以在组件上创建了属性，然后它工作正常。
