vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > v-model绑定多循环表达式

vue中v-model如何绑定多循环表达式实战案例

作者：Dignity_呱

v-model绑定的变量无论是对象还是数组都是绑定的value值,下面这篇文章主要给大家介绍了关于vue中v-model如何绑定多循环表达式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一、存在问题

在v-model想绑定表达式 || 函数方法，发现控制台报错了，不允许这波操作。

下面我们分析存在该问题的原因和解决方法。

实战经验。

二、还原场景

有这样子的数组对象结构

const arr = [
  { value: 'a' }, { value: 'b' }
]

const item {
  a: 1,
  b: 2,
  __config__:{ required: false },
}

想循环arr数组，然后通过arr.value去找item里面的属性，然后绑定在v-model上。

理想效果是：

arr我们有两个对象，就循环两个出来，通过arr[0].value去寻找item的属性。

<div>
  <van-switch v-model="item[arr[0].value]" />
  <van-switch v-model="item[arr[1].value]" />
</div>

于是，我们可以很顺利的😁写出遍历

<div
  v-for="(cell, cellKey) in arr"
  :key="cellKey"
>
  <van-switch v-model="item[cell.value]"  />
</div>

需求提升

前面只是为下面做铺垫，其实真实的场景会更复杂点。

数组对象结构是这样子的：

想通过arr.value去找item里面的属性，然后绑定在v-model上。

现在的arr数组的对象不再是一层了，而是多层，如：

{ value: '__config__.required' }

这样的结构怎么在template上遍历呢？

const arr = [
  { value: 'a' }, { value: '__config__.required' }
]

const item {
  a: 1,
  b: 2,
  __config__:{ required: false },
}

三、进行分析

3.1 直接赋值法

于是，有了第一个想法，就是arr数组写着：

{ value: '__config__.required' }

直接看v-for遍历出来是怎么样的。

<div
  v-for="(cell, cellKey) in arr"
  :key="cellKey"
>
  <van-switch v-model="item[cell.value]"  />
</div>

他不是在__config__对象中去设置required，而是把__config__.required当做一个属性了。

v-model 不仅仅是语法糖，它还有副作用。

如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地增加这个属性，并让它响应式。

很明显，这个方法不行❌，只适用于item.a，不能支持多层item.__config__.required。

再尝试另外一种方法🚶。

3.2 通过方法解析

我想在v-model绑定一个函数专门来让其value里面的'__config__.required'取出。

理想是通过一个方法，比如叫_get方法，这个方法可以让他处理成item['__config__']['required']，这样子我们就可以取到正确的值了。

开干！

* @description 实现 lodash 的_.get
*
* @param {Array/Object} source 目标数组/对象
* @param {String} path 获取对象的字符串路径
* @param {*} [defaultValue=undefined] 若值为空，则可传入默认值作为返回值
* @return {*} 
* @example
* const get1 = tool._get({ a: null }, "a.b.c", 3)       // output: 3
  const get2 = tool._get({ a: [{ b: 1 }] }, "a[0].b")   // output: 1
*/
_get(source, path, defaultValue = undefined) {
 // a[3].b -> a.3.b -> [a,3,b]
 // path 中也可能是数组的路径，全部转化成 . 运算符并组成数组
 const paths = path.replace(/\[(\d+)\]/g, ".$1").split(".")
 let result = source
 for (const p of paths) {
   // 注意 null 与 undefined 取属性会报错，所以使用 Object 包装一下。
   result = Object(result)[p]
   if (result == undefined) {
     return defaultValue
   }
 }
 return result
}

然后在模板里面遍历，通过_get解析取值。

<div
  v-for="(cell, cellKey) in arr"
  :key="cellKey"
>
  <van-switch v-model="_get(item, cell.value)"  />
</div>

data(){
   return {
    const arr = [
      { value: 'a' }, { value: '__config__.required' }
    ]

    const item {
      a: 1,
      b: 2,
      __config__:{ required: false },
    }
   }
}

发现控制台报错了。

v-model‘ directives require the attribute value which is valid as LHS

📖中文翻译： “v-model”指令要求属性值必须与LHS一样有效

❓原因：v-model将始终把Vue实例的data视为数据真实的来源，你应该在组件的JavaScript里的data中声明初始值，这意味着你不能要求v-model一次观察多个变量。

通俗易懂的说：你不能在v-model绑定函数或者表达式。

看来，这个方法也❌行不通，继续探索解决方案🚶。

3.3 通过computed计算属性

v-model 的值只能是一个变量。

值得一提，v-model可以绑定计算属性的值，因为计算属性也是data数据真实的数据，是一个变量。

那我们就可以在computed计算属性里面去通过_get方法解析取值。

<div
  v-for="(cell, cellKey) in arr"
  :key="cellKey"
>
  <van-switch v-model="getItem"  />
</div>

computed:{
    getItem(){
        return _get(this.item, 写啥)
    }
}

我们可以发现，写不下去了，如果没有v-for遍历，只是一个值的话，就可以。

但是，咱们这里的遍历的，我们不能在遍历的时候，传参数给计算属性getItem，传了就变成方法了，就会报错。

计算属性可以用，但在v-model不能传参。

<van-switch v-model="getItem"  />

// 我们不能写
<van-switch v-model="getItem(item, cell.value)"  />

看来，计算属性在我们这里是❌行不通了，但计算属性可以解决我们v-model不能去调用方法的问题。

计算属性还是可以很好的解决单个值写表达式的。

3.4 two value

我想到一个最傻的方案。

就是写两个value，然后判断一下，如下代码：

<div
  v-for="(cell, cellKey) in arr"
  :key="cellKey"
>
    <template v-if="cell.value1">
        <van-switch v-model="item[cell.value][cell.value1]"  />
    </template>
    <template v-else>
        <van-switch v-model="item[cell.value]" />
    </template>
</div>

data(){
   return {
    const arr = [
      { value: 'a' }, { value: '__config__', value1: 'required' }
    ]

    const item {
      a: 1,
      b: 2,
      __config__:{ required: false },
    }
   }
}

如果可以写表达式，里面就不需要写两条了，直接写：

<van-switch 
  v-model="cell.value1 ? item[cell.value][cell.value1] : item[cell.value]"  
/>

当然，直接写个方法来解析获取__config__.required会更好。

3.5 父子组件 + 计算属性

有了以上的实践，我们可以来总结一下目前的情况：

我们可以想到，可以创建一个新的组件，然后组件内接收每次循环的item，在新的组件里面写v-model绑定计算属性。

Perfect完美。

代码如下：

父组件

<div v-for="(cell, cellKey) in arr" :key="cellKey">
    <Item :item="item" :cell="cell" />
</div>

data(){
   return {
    const arr = [
      { value: 'a' }, { value: '__config__', value1: 'required' }
    ]

    const item {
      a: 1,
      b: 2,
      __config__:{ required: false },
    }
   }
}

子组件Item.vue

<div>
    <van-switch v-model="itemVal"  />
</div>

<script>
props:['item', 'cell']

computed:{
    itemVal(){
      return this.cell.value1 ? this.item[this.cell.value][this.cell.value1] : this.item[this.cell.value]
    }
  },

</script>

于是，我们愉快的打开页面看下效果成功了没，发现控制台吐了块红色的错误。

Computed property "itemVal" was assigned to but it has no setter.

意思是：计算属性 itemVal被赋值了，但此它并未定义 set方法 。

要解决这个问题，首先要明确这个问题出现的原因。这个警告是由于Vue的计算属性内部没有set方法，即：计算属性不支持值的修改（只能针对data中的值进行计算）。

因为我们是v-model双向绑定，所以会触发到值的修改。

computed:{
    itemVal:{
      get(){
        return this.cell.value1 ? this.item[this.cell.value][this.cell.value1] : this.item[this.cell.value]
      },
      set(v){
        if(this.cell.value1){
          this.item[this.cell.value][this.cell.value1] = v
        }else{
          this.item[this.cell.value] = v
        }
      }
    }
  },

如上面所示，只要手动给计算属性添加get和set方法的不同操作，这个警告就解决了。

那既然可以写方法了，我们可以利用上面的_get方法去解析，就不需要写两个value、value1了，写一个value: "__config__.required"，通过_get去解析即可。

后记

巧妙的利用计算属性可以是变量，来为v-model进行绑定。

这是在开发过程中的一些思路、一些尝试点。

代码总是一点一点优化，有时候先把功能点走通，再花点时间看看，能不能优化，精而再精🦀。

这也是在实际项目中真实遇到的场景。

到此这篇关于vue中v-model如何绑定多循环表达式的文章就介绍到这了,更多相关v-model绑定多循环表达式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文