当前位置: 首页 > news >正文

vue数据变了,视图没有更新解决方法

this.$forceUpdate()

详细场景:对象里面的属性开始没有定义,后期加上的

  // 删除视频
    deleteVideo (index) {
      // 清空传递后端绑定的值 及 页面显示的值
      this.videoUrl[`video${index + 1}`] = null
      this.uploadVideoIndex = -1
      // 坑:需要强制更新视图,否则视图没变化
      this.$forceUpdate()
    },
 computed: {
    ...mapState(['isUseLottie']),
    // 储存图片url的地址,处理图片显示顺序
    imgUrl () {
      let imgUrl = {}
      this.imgArr.map((item, index) => {
        imgUrl[`img${index + 1}`] = null
      })
      return imgUrl
    },
    // 视频url
     videoUrl () {
      let videoUrl = {}
      this.videoArr.map((item, index) => {
        this.$set(videoUrl, `video${index + 1}`, null)
      })
      return videoUrl
    },
    // 物料url
     materialUrl () {
      let materialUrl = {}
      this.imgArr.map((item, index) => {
        this.$set(materialUrl, `material${index + 1}`, null)
      })
      return materialUrl
    },
    // 素材类型下拉框数组
    materials() {
      let materialTypeArr = []
      this.configData.map(item => {
        if (this.adIdea.flow_type === item.flow_type) {
          let adForm = item.ad_forms
          adForm.map(item => {
             if (this.adIdea.ad_form === item.id) {
              materialTypeArr = item.materials
             }
          })
        }
      })
      // console.log(materialTypeArr, 'materialTypeArr....')
      return materialTypeArr
    },
  },

 

相关文章:

  • 详解elementUI中input框无法输入的问题
  • vue实现表单未编辑或未保存离开弹窗提示功能
  • vue中父组件异步获取数据给子组件传参
  • 如何打造一个属于自己的命令行工具
  • git bash使用vue-cli创建项目无法切换选项
  • 线程和进程的区别是什么?
  • vue中的mixins(混入)使用场景介绍
  • webpack中,devServer.proxy跨域无效的解决办法
  • 数组里的字符串转换成数字或者把数字转换成字符串
  • 小米运动蓝牙耳机使用说明书-如果第二次切换到配对状态
  • el-input只能输入数字
  • element多个弹窗层级问题
  • 浅谈测试左移和测试右移
  • js去除字符串中的所有空格(包括前后,中间存在的所有空格)
  • js判断数组是否有重复值
  • [PHP内核探索]PHP中的哈希表
  • [Vue CLI 3] 配置解析之 css.extract
  • “寒冬”下的金三银四跳槽季来了,帮你客观分析一下局面
  • 【407天】跃迁之路——程序员高效学习方法论探索系列(实验阶段164-2018.03.19)...
  • ES2017异步函数现已正式可用
  • FineReport中如何实现自动滚屏效果
  • Javascript编码规范
  • Java编程基础24——递归练习
  • Js基础知识(一) - 变量
  • mysql_config not found
  • Mysql优化
  • python docx文档转html页面
  • SOFAMosn配置模型
  • 爱情 北京女病人
  • 编写符合Python风格的对象
  • 成为一名优秀的Developer的书单
  • 理解在java “”i=i++;”所发生的事情
  • 前端代码风格自动化系列(二)之Commitlint
  • 设计模式走一遍---观察者模式
  • 数据库写操作弃用“SELECT ... FOR UPDATE”解决方案
  • 白色的风信子
  • 小白应该如何快速入门阿里云服务器,新手使用ECS的方法 ...
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • (3)STL算法之搜索
  • (AngularJS)Angular 控制器之间通信初探
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第2节(共同的基类)
  • (Matlab)基于蝙蝠算法实现电力系统经济调度
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (二)丶RabbitMQ的六大核心
  • (附源码)springboot教学评价 毕业设计 641310
  • (七)c52学习之旅-中断
  • (十二)springboot实战——SSE服务推送事件案例实现
  • (已更新)关于Visual Studio 2019安装时VS installer无法下载文件,进度条为0,显示网络有问题的解决办法
  • (转)如何上传第三方jar包至Maven私服让maven项目可以使用第三方jar包
  • ..thread“main“ com.fasterxml.jackson.databind.JsonMappingException: Jackson version is too old 2.3.1
  • .describe() python_Python-Win32com-Excel
  • .Net FrameWork总结
  • .NET 分布式技术比较
  • .net 无限分类
  • .NET 中让 Task 支持带超时的异步等待