微信小程序this.setData给对象&数组动态赋值

JinzRin 2023-04-13 原文

1. 固定属性赋值

wxml:

<view>{{formData.title}}</view>

js:

data:{
    formData:{
        title:'hellow'
    }
}

这个时候页面上显示的是 hellow

当我们修改的时候有2种方案

// 方案一 整体赋值

this.data.formData.title = 'china';
this.setData({
    form:'china'
})

// 方案二 单个属性赋值
this.setData({
   'form.title':'china'
})
或
this.setData({
   ['form.title']:'china'
})

2.动态属性赋值

wxml:

<view wx:for="{{arr}}" wx:for-item="item" wx:key="*this">{{item.title}}</view>

js:

data:{
    arr:[
        {
            id:1,
            title:'标题一'
        },
        {
            id:2,
            title:'标题二'
        }
    ]
}

修改数组里对象的属性

let index = 0;
this.setData({
    `[arr[${index}].title]`:'china'
})
或
let name = this.data.arr[0].title;
this.setData({
    [name]:'china'
})

通过es6模版字符串 `` 的方式 key 可以作为变量

wxml:

<view>{{formData.a0}}</view>
<view>{{formData.a1}}</view>
<view>{{formData.a2}}</view>

js:

data:{
    formData:{
        a0:'111',
        a1:'222',
        a2:'333'
    }
}

循环修改

for(let i=0 ; i<2 ; i++){
    let name = `a${i}`;
    this.setData({
        [name]:'c'+i
    })
}

//显示结果
a0:c0
a1:c1
a2:c2

3.双向数据绑定

<input name="名称" type="text" value="{{formData.title}}" placeholder="请输入" />
<button bindtap="onSubmit">提交</button>

经过多次尝试提交获取到的formData.title数据为空，据说加上model:value会生效，然而并没有任何效果，甚至一度怀疑人生，直到找到一篇帖子说 2.9.3以上版本才支持

wx.getSystemInfo({
   success: function (res) {
        console.log('该版本号为: ',res.SDKVersion)
   }
})

// 输出结果该版本号为: 2.19.4

很显然不支持

网上搜索了一番，微信小程序居然没有双向数据绑定，如果想要动态改变 data 值需要用到 bindinput 方法拿到输入的值，再赋值给data，看到这里有点无语，既然找到了方法就写吧。

考虑到一个页面上可能存在多个input总不能每个都加一个bindinput方法吧，这样太鸡肋的，有没有办法写一个通用的。

wxml:

<input name="姓名" type="text" value="{{formData.title}}" 
data-name="title" bindinput="handleInput" placeholder="请输入" />

<input name="手机号码" type="text" value="{{formData.phone}}" 
data-name="phone" bindinput="handleInput" placeholder="请输入号码" />

<input name="地址" type="text" value="{{formData.address}}"  
data-name="address" bindinput="handleInput" placeholder="请输入" />

js:

data:{
    formData:{
        title:'',
        phone:'',
        address:''
    }
}

这样就可以用data-属性获取我当前需要修改的key，再结合上面动态变量

handleInput(e){
    let valueName = e.target.dataset.name;
    let name = `formData.${valueName}`;
    this.setData({
      [name]:e.detail.value
    })
  },

至此大功告成，虽然代码量没多少，如果不知道的话要花好多时间在这个上面。感谢前辈们的帖子，这里只描述了部分方法，还有很多更高级的用法，地址贴在下方。

参考网址：

https://blog.csdn.net/wuguidian1114/article/details/103293615

https://blog.csdn.net/weixin_47617631/article/details/126312443

https://blog.csdn.net/weixin_64397810/article/details/124218309

http://t.zoukankan.com/sgqwjr-p-9130744.html

https://blog.csdn.net/weixin_44151130/article/details/124649372

amp setData code 34 title 微信小程序小程序

有关微信小程序this.setData给对象&数组动态赋值的更多相关文章

ruby - 如何从 ruby 中的字符串运行任意对象方法？ - 2
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou
ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2
在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2
我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代
ruby - 多次弹出/移动 ruby 数组 - 2
我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。关于ruby-多次弹出/移动ruby数组，我们在StackOverflow上找到一
ruby - 将数组的内容转换为 int - 2
我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]
ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。最佳答案我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为
ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2
为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

微信小程序this.setData给对象&数组动态赋值

有关微信小程序this.setData给对象&数组动态赋值的更多相关文章

随机推荐