在vue的属性中绑定了一个方法

最新推荐文章于 2024-05-10 18:15:56 发布

weixin_33894992

最新推荐文章于 2024-05-10 18:15:56 发布

阅读量2.5k

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/rodger/blog/2961138

版权

为什么80%的码农都做不了架构师？>>>

问题：

由于iview的iselect中要我geu选择数量做个限定，但这个组件的设计本身没有一个类似于max的属性，想来也属于一个比较小众的需求。

变通解决：

选项ioption中存在一个disabled属性，且有一个selected属性。于是，我对disabled属性绑定了一个方法，这个方法将根据iselect绑定的数组长度和选项当前的选中状态进行判断，如果选项个数超过指定数目，且选项状态为未被选中，则返回为true，否则为false。代码如下：

isDisabled:function(e){
					if((this.selectedItems.length)>=5&&this.$refs[e]&&this.$refs[e][0].selected!=true)return true;
					else return false;
				},

html绑定方式如下:

<i-select v-model="selectedItems" placeholder='Select' text='Select'  value=0 size='small' filterable multiple style="width: 200px" >
  <i-option v-for="item,key in Items"  :ref='"item"+item.id' :value="item.id"  :disabled="isDisabled('item'+item.id)" :key="item.id" :label="item.name">
  </i-option>
</i-select>

结果：

当前可以满足需求，暂时能跑。

问题：在返回值判断的时候，用了三个条件，其中，中间的那个进行了一个结果测试。按说在增加了Items的个数后，refs中应该出现对应的对象，但是在实际运行中出现了一个找不到的问题，即$refs[e]返回内容为空，为什么，不得而知。由于属性绑定方法返回值的做法似乎不是vue的主流做法，控制台调试也比较费劲，因此没有继续深究。希望有人指点迷津，不胜感激。

转载于:https://my.oschina.net/rodger/blog/2961138