Vuejs更新循环[重复]答案

【问题标题】：Vuejs Update loop [duplicate]Vuejs更新循环[重复]
【发布时间】：2021-09-26 12:02:30
【问题描述】：

我想从 Api 服务获取数据并通过 VueJs 在“for loop”中显示。

但是当我从 Api 服务获取数据时，Vue 没有更新“for loop”。

 <div v-for="item in messages">
       {{item}}
 </div>
 
 new Vue({
        el: '#main-content',
        data: {
            next: false,
            experts: <?php echo json_encode($list_of_expert_activity); ?>,
            activitys: null,
            messages: []
        },
        methods: {
            contract_message() {
                let url = '<?= URL ?>';
                let id = '<?= $data['contract_id'] ?>';
                axios.get(url + '/panel_admin/contract_message/' + id)
                    .then(function(response) {
                        this.messages = response.data
                        //Vue.set(this.message,)
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
                    .then(function() {
                        
                    });
            }
        }
    })

API 服务响应示例：

[
  {
    "id":1,
    "color":"red",
  },
   {
    "id":2,
    "color":"blue",
  }
]

【问题讨论】：

何时调用方法contract_message？
当我点击一个按钮@NikolaPavicevic
也许你可以让contract_message方法异步

标签： javascript vue.js

【解决方案1】：

您的代码的问题在于这部分：

.then(function(response) {
   this.messages = response.data
   //Vue.set(this.message,)
})

this这里不指vue组件。

您可以通过将传递给then 的回调函数更改为箭头函数来解决这个问题：

.then((response) => {
   this.messages = response.data
   //Vue.set(this.message,)
})

【讨论】：

【解决方案2】：

也许你可以让 contract_message 方法异步：

methods: {
        async contract_message() {
            let url = '<?= URL ?>';
            let id = '<?= $data['contract_id'] ?>';
            await axios.get(url + '/panel_admin/contract_message/' + id)
                .then(function(response) {
                    this.messages = response.data
                    //Vue.set(this.message,)
                })
                .catch(function(error) {
                    console.log(error);
                })
                .then(function() {
                    
                });
        }
    }

【讨论】：