vue配合django接口,v-for循环的时候显示不了数据

39 篇文章 1 订阅
2 篇文章 0 订阅

vue在使用v-for的时候,经常会有数据显示失效的时候,比如:

<li v-for="new_art in data_list"><span><i class="el-arrow-up fa fa-paper-plane-o"></i>最近:<font class="blue-text">{{ new_art.author.name }}</font> {{ new_art.created_at }}</span><a href="/article/content/{{ new_art.uid }}/?num=1" title="{{ new_art.title }}">更新了<b class="lable">文章</b></a></li>

这段代码,我在使用vue 的时候,无论如何使用v-for,都无法出来数据

但是大部分情况还是能正常使用的
接下来列几点需要经常会出错的点:

1.vue在使用的时候,命名要规范

Vue.use(VueResource);
    function api_request(id,URLobj) {
        var vue = new Vue({
        el:id,
        data:{
            data_list:[]
        },
        created:function () {
            this.$http.get(URLobj).then(
                function (data) {
                    this.data_list = data.data.data;
                },
                function (error) {
                    console.log(error)
                }
            )
        }
    })
    }

在我的这段vue里,id是绑定数据的id,URLobj是路由地址,
当我调用这段vue的时候

api_request('#3tag','/APItag/');

当我命名成这样的时候,数据无法出来,我当时认为id是唯一的,数据显示与否应该和这个id无关,但是当我鬼使神差的改了id:

api_request('#tag_cloud','/APItag/');

数据就正常显示了

2,v-bind使用格式:

v-bind:href="'/article/content/'+art.uid+'/?num=0'"

格式,v-bind:属性名=" ‘字符串’+变量+‘字符串’ "

3.标签嵌套太复杂可能会影响数据显示
当我的标签嵌套过于复杂时,有时候v-for循环就可能失效

4.还有很多其他的,比如v-if,v-on等,都比较简单,基本使用可以满足

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DjangoVue中,v-for和v-if是用于在Vue模板中进行循环和条件渲染的指令。 在Django中,通过Django模板语言(DTL)将数据传递给Vue模板。通过在Django视图中设置一个返回JSON数据的路由,例如mysite.views中的test函数,使用JsonResponse返回数据。然后在Vue项目中使用v-for指令循环遍历该数据并渲染到页面上。例如可以使用v-for指令遍历一个列表,并在模板中显示每个项目的内容。 在Vue中,使用v-bind指令可以动态绑定属性值,例如v-bind:href可以绑定一个动态的URL路径。在引用中的代码示例中,v-bind:href绑定了一个动态的URL路径,其中包括art.uid和num参数。这样可以根据数据的不同生成不同的URL路径。 此外,v-if是Vue的条件渲染指令,可以根据条件来决定是否渲染某个元素。在引用中的代码示例中,v-if可以在Vue实例的created函数中使用,根据条件来决定是否渲染某个元素。 综上所述,在DjangoVue中,v-for和v-if都是用于在Vue模板中进行循环和条件渲染的指令,可以根据数据的不同生成不同的内容,并根据条件来决定是否渲染某个元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-cli+Django](https://blog.csdn.net/weixin_42929804/article/details/111315930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue配合django接口,v-for循环的时候显示不了数据](https://blog.csdn.net/weixin_45154837/article/details/99541658)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值