Vuejs沒有更新列表，但更新obect

我在學習Vuejs，我被卡住了。爲什麼我可以看到消息被添加到對象中（在Chrome Vue調試器中），但它沒有被添加到包含列表的div中？Vuejs沒有更新列表，但更新obect

我Vue的組件：

<template> 
    <div id="round-status-message" class="round-status-message"> 
     <div class="row"> 
      <div class="col-xs-12" v-for="sysmessage in sysmessages" v-html="sysmessage.message"></div> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     props: ['sysmessages'], 

     methods: { 
      scrollToTop() { 
       this.$el.scrollTop = 0 
      } 
     } 

    }; 
</script>

我Vue的實例：

$(document).ready(function() 
{ 
    Vue.component('chat-system', require('../components/chat-system.vue')); 

    var chatSystem = new Vue({ 
     el: '#system-chat', 

     data: function() { 
      return { 
       sysmessages: [] 
      }; 
     }, 

     created() { 
      this.fetchMessages(); 

      Echo.private(sys_channel) 
       .listen('SystemMessageSent', (e) => { 

        this.sysmessages.unshift({ 
         sysmessage: e.message.message, 
        }); 

        this.processMessage(e); 

       }); 

     }, 

     methods: { 
      fetchMessages() { 
       axios.get(sys_get_route) 
       .then(response => { 
        this.sysmessages = response.data; 
       }); 
      }, 

      processMessage(message) { 

       this.$nextTick(() => { 
        this.$refs.sysmessages.scrollToTop(); 
       }); 

       // updateGame(); 

      } 
     } 
    }); 

});

我在HTML模板調用：

<div id="system-chat"> 
    <chat-system ref="sysmessages" v-on:systemmessagesent="processMessage" :sysmessages="sysmessages" :player="{{ Auth::user() }}"></chat-system> 
</div>

有沒有編譯或運行時錯誤，我可以請參閱vue chrome工具中添加到props的記錄。我還可以看到添加到div的空HTML元素。

我錯過了什麼？

UPDATE：我的記錄結構：

response.data是對象的數組，每個這樣的：

{"data":[ 
    {"id":100, 
     "progress_id":5, 
     "message":"start message", 
     "action":"welcome" 
    }, 
    {"id"....

e.message.message包含文字信息錄入，所以只是一個字符串。

我想在fetchMessages方法中訪問每個對象的message變量。

來源

2017-08-30 TheRealPapa

Hi @Bert，你的建議解決了我的問題，但它打破了'fetchM現在消息'片斷。 – TheRealPapa

它是如何打破它？理想情況下，「response.data」和「e.message」的結構是什麼。 – Bert

Hi @Bert我加了記錄 – TheRealPapa

您正在以sysmessage作爲屬性添加對象。

this.sysmessages.unshift({ 
    sysmessage: e.message.message, 
});

但是你想根據您的更新，查看

v-for="sysmessage in sysmessages" v-html="sysmessage.message"

，代碼應該是：

this.sysmessages.unshift({ 
    message: e.message.message, 
});

而且你可以離開模板

v-html="sysmessage.message"

來源

2017-08-30 15:41:50 Bert

Vuejs沒有更新列表，但更新obect

回答

相關問題