VueJS2属性未定义

我写了下面的代码和Vue公司抱怨：VueJS2属性未定义

[Vue公司提醒]：属性或方法“事件”未在实例定义，但期间所参考的渲染。确保在数据选项中声明反应性数据属性。

我不明白为什么不能访问事件？

var app = new Vue({ 
    el: '#app', 
    data: { 
     responders: [], 
     incidents: [] 
    }, 

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

    methods: { 
     getIncidents: function() { 
      console.log('getIncidents'); 
      var app = this; 
      this.$http.get('/api/v1/incidents').then(function(response) { 
       // set data 
       var incidentsReceived = response.data.map(function (incident) { 
        return incident; 
       }); 
       Vue.set(app, 'incidents', incidentsReceived); 
      }) 
     }, 

     getResponders: function() { 
      console.log('fetchResponders'); 
      var app = this; 
      this.$http.get('/api/v1/responders').then(function(response) { 
       // set data on vm 
       var respondersReceived = response.data.map(function (responder) { 
        return responder 
       }); 
       Vue.set(app, 'responders', respondersReceived); 
      }); 
     } 
    } 
})

来源

2017-02-06 sesc360

可能创建一个[小提琴]（https://jsfiddle.net/er3tjyh0/）它显示的问题？ – Saurabh

data是为内部组件数据建模，而道具，其可以从外部被分配，使用的是为组件的props键定义。

换句话说，尝试：

var app = new Vue({ 
    ..., 
    props: { 
    incidents: { 
     type: Array, 
     required: false //change this as you see fit. 
    } 
    }, 
    ... 
});

有关组件属性的完整文档，请参阅official guide。

来源

2017-02-06 13:35:52

但我没有定义一个组件，有我吗？从VueJS1.0开始，我总是将数据打包在我的“数据”容器中，如下所示：'new Vue（{el：'#app'， data：'陛下问候'' }）;'' – sesc360

根vue实例和组件接口属性的方式相同。我认为你有某种模板提供属性值的方式或另一种方式，但它似乎是使用Vue.set（...）时出现错误？如果是这样的话，我不确定你应该使用Vue.set，我想你正在寻找的东西就像'this.incidents'来访问你''数据'中的'事件'。 –

编辑：没有很好地阅读代码第一次。验证响应中是否有数据，如果没有，则不要将其设置为事件数组。

来源

2017-02-06 13:48:59

我试着用Vue.set的最后一种方法，但我仍然得到这个错误。我正在为回调函数中的变量事件赋值，所以它应该工作？奇怪的是，响应者的功能完美无缺！这是相同的结构，所以我不明白为什么事件不起作用，然后 – sesc360

你用自己尝试？你能否确认你实际上得到了答案中的任何数据，只是为了确保你在那里有东西。刚注意到现在你已经设置了应用程序到'this'：D：D –

是不适用于var app = this？是的，数据可用 – sesc360

VueJS2属性未定义

回答

相关问题