参考:官方文档-switch
这个元件貌似默认无法使用v-model双向绑定

  1. <switch :checked="payed" @change="switchChange" />
  1. switchChange(e) {
  2. //e是点击事件参数,获取里面detail.value的值
  3. let val = e.detail.value
  4. console.log(val);
  5. this.payed = val
  6. }

普通双向绑定,利用this.$set()

  1. payed: {
  2. checked: false
  3. },
  4. //已转账表格行里使用方法
  5. switchChange(e) {
  6. console.log(e);
  7. let value = e.target.value
  8. let that = this
  9. this.$set(this.payed,"checked",value)
  10. this.payed.checked = value
  11. uni.showModal({
  12. title: '提示',
  13. content: '确定要标记为 "已转账" 吗?',
  14. success: res => {
  15. if (res.confirm) {
  16. //确定的逻辑
  17. console.log('用户点击确定')
  18. } else if (res.cancel) {
  19. //取消的逻辑
  20. this.$set(this.payed,"checked",!value)
  21. console.log('用户点击取消');
  22. }
  23. }
  24. });
  25. }

双向绑定的方法-表格里使用row(当前行,要整行)

利用的原理就是浅拷贝的原理修改原来的值。

  1. //已转账表格行里使用方法
  2. switchChange(row) {
  3. console.log(row);
  4. let value = !row.checked
  5. let that = this
  6. row.checked = value
  7. uni.showModal({
  8. title: '提示',
  9. content: '确定要标记为 "已转账" 吗?',
  10. success: res => {
  11. if (res.confirm) {
  12. //确定的逻辑
  13. let p = {
  14. id: row.id,
  15. status: 3
  16. }
  17. console.log('用户点击确定')
  18. } else if (res.cancel) {
  19. //取消的逻辑
  20. row.checked = !value
  21. console.log('用户点击取消');
  22. }
  23. }
  24. });
  25. }