首页 > 其他分享 >解决uniapp修改data中的数据视图未更新的问题

解决uniapp修改data中的数据视图未更新的问题

时间:2022-08-15 10:13:46浏览次数:78  
标签:uniapp set title items 视图 message data id

 

更改普通数据直接赋值即可,更改数组要通过this.$set()来解决

 

export default {
    data () {
        return {
            title: "Hello",
                        items: [
                            { message: "one", id: "1" },
                            { message: "two", id: "2" },
                            { message: "three", id: "3" }
                        ]
        }
    },

    /**
    * 更改题目-title
    */
    updateTitle() {
       this.title = "你要改的新值"
    },

       /**
     * 更改数组的元素
     */
    updateItems() {
        //格式this.$set( target, key, value )

        //第一种方式
        this.$set(this.items[0], 'message', 'one1', ); //改成数字类型就不用了加引号

        //第二种方式
        this.$set(this.items, 0, {
            message: "one3",
            id: "13"
        })
    }
}

 

代码来源:https://www.cnblogs.com/nurmemet/p/14473421.html

标签:uniapp,set,title,items,视图,message,data,id
From: https://www.cnblogs.com/wq805/p/16587257.html

相关文章

  • django中视图函数的FBV和CBV
    1.什么是FBV和CBVFBV是指视图函数以普通函数的形式;CBV是指视图函数以类的方式。2.普通FBV形式defindex(request):returnHttpResponse('index')3.CBV形式3.1CBV形......
  • @Data 注解
    简介对于Data注解基本理解而言就是生成getter&setter函数但是经过探究不单单有getter&setter还有toString方法hashCode方法和equals方法。原代码imp......
  • python 解析from-data数据
    最近在自己尝试使用python基于wsgiref写小型后端框架时需要从前端上传文件到后台,那么要在前端表单中需要添加enctype="multipart/form-data"这样后台拿到的数据不能使用......
  • HCIA-Datacom 2.1 实验一:IPv4编址及IPv4路由基础实验
    实验目的掌握接口IPv4地址的配置方法理解LoopBack接口的作用与含义理解直连路由的产生原则掌握静态路由的配置方法并理解其生效的条件掌握通过PING工具测试网络层联通......
  • uniapp顶部搜索图标实现(App端,小程序不支持)
    这两个部位的图标可以在page.json中配置,不需要单独编写(小程序中需要手动编写,通过flex布局实现)1、在pages.json中的pages-->style-->app-plus中添加titleNView2、font......
  • 一文带你彻底弄懂ES中的doc_values和fielddata
    基本概念这两个概念比较像,所以大部分时候会放在一起说。这两个概念源于Elasticsearch(后面简称ES)除了强大的搜索功能外,还可以支持排序,聚合之类的操作。搜索需要用到倒排索......
  • HCIA-Datacom 1.1实验 华为VRP系统基本操作
    前言:最近有很多老哥,会私信问我一些华为的网络配置和规划,在调试的时候我发现其实我命令也忘了很多,所以写一个文档,方便大家查阅实验介绍:  实现功能:1.完成设备重命名,路......
  • Enterprise Library 5 系列之——Data Access Application
    DataAccessApplication实现任务TaskMethodsFillingaDataSetandupdatingthedatabasefromaDataSet.ExecuteDataSet.Creates,populates,andret......
  • 筛选dataType为4的内容
    #筛选类型数据classShaiXuanLeiXing:def__init__(self,file_name):self.file_name=file_nameself.mubiao_list=[]self.sheqi_lis......
  • uniapp获取元素的宽度、高度
     uni.createSelectorQuery().in(this).select('.类名').boundingClientRect(data=>{ console.log(data.height) console.log(data.width) }).exec() ......