问答

请教Vue中的v-for循环为什么无论我用什么方法都不更新视图呢?

作者:admin 2021-04-21 我要评论

代码用的是官方默认helloworld模板 ProductItem一开始是空对象,通过接口赋值给list属性,然后无论我使用this.$set也好,还是通过v-if来渲染,都没效果。 有什么...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

代码用的是官方默认helloworld模板
ProductItem一开始是空对象,通过接口赋值给list属性,然后无论我使用this.$set也好,还是通过v-if来渲染,都没效果。
有什么办法解决?

<template>
  <div class="hello">
      456
    <view v-if="sign" v-for="(oItem,index) in ProductItem.list" :key="index" 
                            :id="index" 
                            :data-opid="oItem.id" :data-marketprice="oItem.marketprice" :data-title="oItem.title"
                            :style="oItem.select ? 'background-color: rgba(214, 34, 56, 0.04);border:1px solid #D0021B;font-size:13px;color: #D0021B' : 'background-color: #fff;border:1px solid #999;font-size:13px;color: #333'" 
                            >{{oItem.title}}</view>
                            <button @click="ddd">点击</button>
  </div>
</template>
<script>
import _ from "lodash";
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      sign:false,
      ProductItem:{}
    }
  },
  mounted(){
  //    let arr = _.chunk(['a', 'b', 'c', 'd'], 3);
  //    console.log(arr)
  },
  methods:{
      ddd(){
          this.$set(this.ProductItem,"list",[
                  {
                      "id":1,
                      "marketprice":100,
                      "title":"test1",
                      "select":false
                  },
                  {
                      "id":2,
                      "marketprice":100,
                      "title":"test2",
                      "select":false
                  },
                  {
                      "id":3,
                      "marketprice":100,
                      "title":"test3",
                      "select":false
                  }
              ])
            /*
          this.ProductItem.list = [
                  {
                      "id":1,
                      "marketprice":100,
                      "title":"test1",
                      "select":false
                  },
                  {
                      "id":2,
                      "marketprice":100,
                      "title":"test2",
                      "select":false
                  },
                  {
                      "id":3,
                      "marketprice":100,
                      "title":"test3",
                      "select":false
                  }
              ];*/
            console.log(this.ProductItem)
              this.sign=true
      }
  }
}
</script>
###

ProductItem初始化一个list数组

data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      sign:false,
      ProductItem:{
        list: []
      }
  }
}
###

控制台应该一进页面就报错了吧,v-for
ProductItem.list 初始值是 undefined

###

view标签是小程序的吧,你换成div就可以正常显示

###
  1. ProductItem 应该初始化为 { list: [] }
  2. :key 不要用 index,应该换成对象中的唯一标识字段
  3. 由于有 1,所以不需要 $set,直接 ProductItem.list = ... 就可以了

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 请教Vue中的v-for循环为什么无论我用什

    请教Vue中的v-for循环为什么无论我用什

  • React 组件外可以定义变量吗

    React 组件外可以定义变量吗

  • 1分钟一个订单,3分钟获得充值结果,怎

    1分钟一个订单,3分钟获得充值结果,怎

  • vscode中使用/** 注释内容*/ 注释代码

    vscode中使用/** 注释内容*/ 注释代码

腾讯云代理商
海外云服务器