HTML <div id="category-two" class="mui-control-content"> <section v-for="brands in brand_list"> <header class="category-title">{{brands.type_name}}</header> <ul> <li class="category-item" v-for="brandItem in brands"> {{brandItem.name}} </li> </ul> </section> </div> JS mui.init(); (function($) { var brandList = new Vue({ el: '#category-two', data: { brand_list:{} }, ready: function() { var self = this; $.getJSON(GETBRAND_URL,function(list){ self.brand_list = list.data.brand_list; } ); } }); })(mui); 模拟的brand_list对象数据是可以显示的，但是使用ajax获取数据这一步就出问题了

vue 通过ajax获取数据，但是数据没渲染数来

发布于
2016-12-07

HTML

            <div id="category-two" class="mui-control-content">
                <section  v-for="brands in brand_list">
                <header class="category-title">{{brands.type_name}}</header>
                <ul>
                    <li class="category-item" v-for="brandItem in brands">
                        {{brandItem.name}}
                    </li>
                </ul>
                </section>
            </div>

        mui.init();
        (function($) {
            var brandList = new Vue({
                el: '#category-two',
                data: {
                        brand_list:{}
                },
                    ready: function() {
                    var self = this;
                    $.getJSON(GETBRAND_URL,function(list){
                            self.brand_list = list.data.brand_list;
                        }
                    );
                }
        }); 
        })(mui);

模拟的brand_list对象数据是可以显示的，但是使用ajax获取数据这一步就出问题了

vue.js mui ajax

阅读 15.3k

6 个回答

得票最新

macintosh

232148

发布于
2016-12-07

✓ 已被采纳

我想你的ready应该是生命周期钩子吧，ready现在已经被mounted取代了。

止水

3.4k2415

发布于
2016-12-07

brand_list 应该是数组吧

Dont

7k153552

发布于
2016-12-07

我也刚在看vue2，

把代码弄下来改改运行一下貌似没啥问题,我只是没懂，你的ready是啥来着，我改到methods里面去了，然后用settimeout伪装异步，显示都没啥问题

html

<div id="category-two" class="mui-control-content" @click="ready">
            <p>hha</p>
                <section  v-for="brands in brand_list">
                <header class="category-title">{{brands.type_name}}</header>
                <ul>
                    <li class="category-item" v-for="brandItem in brands">
                        {{brandItem.name}}
                    </li>
                </ul>
                </section>
            </div>

var list = {
        "data": {
            "brand_list": {
                "2": {
                    "0": {
                        "brand_id": 72,
                        "name": "aa",
                    },
                    "type_name": "美妆"
                },
                "8": {
                    "0": {
                        "brand_id": 2,
                        "name": "俪语琳",
                    },
                    "type_name": "饰品"
                }
            }
        },
        "code": 200,
        "message": "操作完成"
    };
        var brandList = new Vue({
                el: '#category-two',
                data: {
                        brand_list:{}
                },
                methods:{
                    ready: function() {
                        var self = this;
                        setTimeout(function(){
                                self.brand_list = list.data.brand_list;
                            },2000
                        );
                    }
                }
            });

vsion

5.1k71839

发布于
2016-12-07

更新于
2016-12-07

你的数据结构太复杂了, 完全可以改为更直观的方式.

"type_list": [//首先说道list, 就应该是一个数组 而且最外层应该是typelist
              //2 和type_name其实逻辑上是一个东西所以没必要写, 如果非要追加id也可以
            {
              "type_name": "美妆",
              brandList: [
                {
                  "brand_id": 72,
                  "name": "aa",
                },
                ...
              ]
            },
        ]

改为如此之后, 再去遍历数据就很直观了

修改数据结构后的运行结果,

代码:

<!DOCTYPE html>
<html>
 <head> 
  <title></title> 
  <script src="vue.js"></script> 
  <script src="../jquery.min.js"></script> 
 </head> 
 <body> 
  <div id="category-two" class="mui-control-content"> 
   <section v-for="brands in brand_list"> 
    <header class="category-title">
     {{brands.type_name}}
    </header> 
    <ul> 
     <li class="category-item" v-for="brandItem in brands.brandList"> {{brandItem.name}} </li> 
    </ul> 
   </section> 
  </div> 
  <script>

        var list =
        [//首先说道list, 就应该是一个数组 而且最外层应该是typelist
              //2 和type_name其实逻辑上是一个东西所以没必要写, 如果非要追加id也可以
            {
              "type_name": "美妆",
              brandList: [
                {
                  "brand_id": 72,
                  "name": "美妆1",
                },
              ]
            },
            {
              "type_name": "美妆",
              brandList: [
                {
                  "brand_id": 72,
                  "name": "美妆2",
                },
              ]
            },
            {
              "type_name": "美妆",
              brandList: [
                {
                  "brand_id": 72,
                  "name": "美妆3",
                },
              ]
            },
        ]
        var brandList = new Vue({
             el: '#category-two',
             data: {
                     brand_list:{}
             },
             mounted: function() {
               var self = this;
               self.brand_list = list;
            }
        });
</script>   
 </body>
</html>

hejiao

401812

发布于
2016-12-07

原因是vue2.0把ready:function(){}替换成了mounted:function(){}