用Vue.js设置数据

Question

对不起我的初学者问题，但是自昨天以来，我一直陷在一个基本问题上，我无法找出解决方案。

我想用一些json对象填充变量日志，并将其呈现在数组中。

这是我的html：

<tbody>

  <tr v-for="log in logs">
    <td>{{log.incident}}</td>
    <td>{{log.request}}</td>
    <td>{{log.requested}}</td>
    <td>{{log.message}}</td>               
  </tr>            

</tbody>

这是我的JS

let vm = new Vue({
    el: '#container',
    components: {
        'table-header': tableHeader,
    },
    data: {
        logs: []
    },
    methods: {
        getLogs() {
            addon.port.on('log', function (data) {
               console.log(data);
               this.$add('logs',data)
            });
        }
    },
    ready:{
        function(){this.getLogs()}
    }

});

vm.getLogs();

1. 准备好似乎没有用。 为什么？
2. this.logs是未定义的吗？ 为什么？
3. 它抱怨“ this。$ add不是函数”
4. 在html中，日志永远不会填充到循环中。 为什么？

Answer 1

1. 您准备好的不应该是对象，而应该是一个功能

2＆3＆4。 在匿名函数内部， this引用了其他内容。 使用箭头功能，以保持的范围this ，或存储到参考this

 let vm = new Vue({ el: '#container', components: { 'table-header': tableHeader, }, data: { logs: [] }, methods: { getLogs() { addon.port.on('log', (data) => { console.log(data); this.$add('logs',data) }); } }, ready() { this.getLogs() } }); 

 //OR do this getLogs() { var that = this; addon.port.on('log', function(data) { console.log(data); that.$add('logs',data) }); } 

Answer 2

我不知道您的示例是否有效，目前无法测试，但我已经习惯了这样的语法：

ready: function(){
    console.log('ready);
}

您的方法也是如此。 也许检查文档并应用此处给出的语法开始。

https://vuejs.org/guide/index.html#入门

Answer 3

您还可以使用mounted ，例如：

mounted () {
    this.getLogs()    
}

文件资料 。

---

数据必须是 Vue组件的函数 ，但对于Vue实例应该没问题。

因此，对于Vue组件，它应具有如下数据：

data: function () {
  return {
    logs : []
  }
}