当前位置：文江博客话题详情

AJAX Vue.js MUI

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

发布于 2022-09-04 06:37:54 字数 1124 浏览 14 评论 0

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获取数据这一步就出问题了

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（6）

倾其所爱 2022-09-11 06:37:54

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

阳光下的泡沫是彩色的 2022-09-11 06:37:54

brand_list 应该是数组吧

最终幸福 2022-09-11 06:37:54

我也刚在看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>

js

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
                        );
                    }
                }
            });

又爬满兰若 2022-09-11 06:37:54

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

"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>

剧终人散尽 2022-09-11 06:37:54

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

倚栏听风 2022-09-11 06:37:54

1、用的1.0还是2.0？2.0移除了ready，改为mounted了

2、请求有没有成功，返回数据格式是否正确？

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

離殇

文章 0 评论 0

小姐丶请自重

文章 0 评论 0

Aik

文章 0 评论 0

国产ˉ祖宗

文章 0 评论 0

猥琐帝

文章 0 评论 0

半仙

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文