如标题所示,我们怎样实现下面的需求呢?


当我们选中其中一个选项时,其它的选项应该被禁用,因为我们只想提交一组数据。怎样使用 Vue.js 来实现呢?

首先我们看,如果是一个checkbox,<input type="checkbox" :disable="true">,这样就可以将其禁用。所以当有多个input 存在时,我们需要的是理清逻辑关系,让disable在何时的情况发挥作用。

禁用:(disable='true'):当有一个选项被选了且不是备选项时

不禁用:(disable='false'):当是选择的项时

理清了上述逻辑,转化成代码就一行(红笔已经标注)

<div class="activity-list" v-for="(activity,activityIndex) in existedTabSearchResults">
                  <ul class="basic-info clear-float-ml">
                    <li>
                      <input type="checkbox"
                             :disabled="chooseIndex!=activityIndex&&chooseIndex!='reset'"
                             @click="chooseActivity(activityIndex)"/>
                    </li>
                </ul>   ...

在vue实例中,有一个activityIndex ,与 chooseIndex,其中   activityIndex 是第一个活动的index,而chooseIndex的选择,则比较巧妙。初始将其设置为'reset',这个状态表明没有一个选项被选择。就是活动列表的初始状态。当选择活动时,则将chooseIndex置为这个活动的index 。当再一次点击该活动,即活动被取消,chooseIndex被置为 'reset' 。

vue实例部分的代码为:

 var vm=new Vue({
      el:'#management',
      data:{
        chooseIndex:'reset',
            },
      methods:{
var vm=new Vue({
      el:'#management',
      data:{
        chooseIndex:'reset',
        },
      methods:{   
        chooseActivity:function(index){
          if(this.chooseIndex==index){
            this.chooseIndex='reset';
          }else{
          this.chooseIndex=index;
          }
        },
... },

无论采取什么逻辑最终实现,都应理清逻辑关系。


 

Logo

前往低代码交流专区

更多推荐