Open vue select operation component

This time I will bring you the opening of the vue select operation component. What are the precautions for opening the vue select operation component? The following is a practical case, let's take a look.

Business: There are two ways to push messages, namely "WeChat" and "Mail". When sending via WeChat, you need to select "Application to be sent". When sending via email, you do not need to send via WeChat. When the email is sent, the page is as follows:

When the email is sent, the selector is not available, and the page is as follows:

Although the official website No specific example is given, but the "disabled" attribute can be found from the attributes,

Add the disabled attribute and write it in the following red mark format; define an isAble variable to store TRUE and FALSE values, Determines whether this selection box is available.

<select>v-bind:disabled="isAble" clearable v-model="dataAgentEntity.ID" style="width:240px"> 
   <option>{{ item.name }}</option> 
 </select> 
export default { 
  data(){ 
    return{ 
      isAble: false,//select下拉框是否可用 
    } 
  }

Then the value of the operating variable isAble in the logic changes the available and disabled status of the component.

 methods:{ 
     Test(){ 
      var vm = this; 
       if (vm.alertType == '邮件') { 
        vm.isAble = true; //不可用 
      } 
        
     }  
}

The test method only writes the judgment of being unavailable. When changing back to WeChat, it also needs to become Available status, otherwise another bug will be buried, haha. But this is business logic. I only introduce the method and take notes. It depends on the situation.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of Open vue select operation component. For more information, please follow other related articles on the PHP Chinese website!