Home > Web Front-end > JS Tutorial > How to use and disable the vue select component

How to use and disable the vue select component

php中世界最好的语言
Release: 2018-05-25 14:10:35
Original
2242 people have browsed it

This time I will show you how to use and disable the vue select component, and what are the precautions for using and disabling the vue select 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",

No need to select ## when sending by email #When sending by WeChat, the page is as follows:

How to use and disable the vue select component When sending by email, the selector is not available, and the page is as follows:

邮件How to use and disable the vue select componentAlthough no specific example is given on the official website, the "disabled" attribute can be found from the attributes,

Attribute##disabledWhether it is disabledBooleanfalseImplementation:
Description Type Default value

Add the disabled attribute and write it in the following red mark format; define an isAble variable for Stores TRUE and FALSE values ​​to determine 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下拉框是否可用 
    } 
  }
Copy after login
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; //不可用 
      } 
        
     }  
}
Copy after login
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:

How to use JS to merge multiple arrays to recalculate


antd drop-down box linkage usage steps Detailed explanation

The above is the detailed content of How to use and disable the vue select component. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template