用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 : []
  }
}