避免在运行时向 Vue 实例或其根 $data 添加响应式属性 - 在 data 选项中预先声明它。

Question

我对使用 VueJS2 有点困惑。我向数据容器添加了一些变量，以便将其发送到我的 API。这工作正常，但 Vue 向我抛出一条警告/错误消息，我不知道如何解决：

避免在运行时向 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);
            });
        }
    }
});

原文由 sesc360 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在为 API 的响应创建一个新的响应式属性

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

不确定您是否拼错了属性名称或忘记创建该属性。只需对您使用现有属性 data 部分

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

或者

data: {
    incidents: null, //or create this property
},

原文由 AldoRomo88 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

就我而言，在使用 Jest 进行单元测试期间，我正在设置 selected 但没有组件，所以出现此错误。

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

所以在组件上创建了属性，然后它工作正常。

原文由 Muhammad Waqas Dilawar 发布，翻译遵循 CC BY-SA 4.0 许可协议