vue.js - $http请求成功后的循环渲染代码如何写

问题描述

问 题

我想渲染一个列表,用的vue-resource请求数据,下面是结构图:

请求能正常打印,然后页面中的代码如下:

<ul class="ulbox">
   <li v-for="item in items">
    {{item.message}}-{{ $index }}
   </li>
</ul>

js代码如下:

export default {
    data (){
        return {
            items:[
                {message:'第一个'},
                {message:'第二个'}
            ]
        }
    },
    ready: function() {
        this.$http({url: '', method: 'GET'}).then(function (response) {
            //求助的部分
            this.$set('message', response.data)

在上面js代码的求助部分,请问应该如何写渲染结构图代码..把items的message改成结构图中的communityAdress.谢谢大家

我是这样子写的,没有正常渲染出来,也没有报错,请问哪里写错了:

解决方案

then 里面的 this 已经变了，不是指向 vm 了，

    ready: function() {
        var self=this
        this.$http({url: '', method: 'GET'}).then(function (response) {
            //求助的部分
            self.items=response.data

这样就把 远程数据 插入 data 里面的 items

这篇关于vue.js - $http请求成功后的循环渲染代码如何写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！