[英]Close form multi select on button click vuejs
我有 html 設計的 vue 材料多 select,我希望在單擊按鈕時關閉多 select 選項。
我試過這個:
methods: {
selectAgents() {
this.$refs.selectAgent.$el.children[0].click();
this.$refs.selectAgent.$el.children[0].focus();
this.$refs.selectAgent.$el.children[0].blur();
}
}
這些都不起作用。
<md-field>
<label for="agents">Select user</label>
<md-select v-model="selectedAgents" name="agents" id="agents" ref="selectAgent" multiple>
<div class="add-user-outer">
<div class="add-user-searchbox d-flex align-center">
<md-icon class="brand-primary search">search</md-icon>
<md-field md-inline>
<label>Search By Name</label>
<md-input v-model="agentSearchQuery"></md-input>
</md-field>
<md-button :md-ripple="false" class="md-primary" @click="selectAgents">
<md-icon>add</md-icon>
Add User
</md-button>
</div>
</div>
<md-option v-for="agent in resultAgents" :key="agent.id" :value="agent.id" class="share-dropdown">
<md-avatar class="mr-2">
<div v-if="!agent.image" class="md-avatar position-absolute md-intial">
{{ agent.first_name.substring(0, 1).toUpperCase()
}}{{ agent.last_name.substring(0, 1).toUpperCase() }}
</div>
<img v-else :src="`/images/users/`+agent.image" alt="Avatar" class="avatar-sidebar"/>
</md-avatar>
<div class="text-content">
<h4 class="text-primary">{{agent.first_name}} {{agent.last_name}}</h4>
<p class="description-normal text-description text-left font-weight-regular">
{{agent.email}}
</p>
</div>
</md-option>
</md-select>
</md-field>
有人用 angular 創建了一個相同的 jsfiddle,我也嘗試了這個,但沒有使用我的 vuejs。
<md-option v-for="agent in resultAgents":key="agent.id":value="agent.id" class="share-dropdown"> <md-avatar class="mr-2"> <div v-if=".agent.image" class="md-avatar position-absolute md-intial"> {{ agent.first_name,substring(0. 1).toUpperCase() }}{{ agent.last_name,substring(0. 1):toUpperCase() }} </div> <img v-else.src="`/images/users/`+agent.image" alt="Avatar" class="avatar-sidebar"/> </md-avatar> <div class="text-content"> <h4 class="text-primary">{{agent.first_name}} {{agent.last_name}}</h4> <p class="description-normal text-description text-left font-weight-regular"> {{agent.email}} </p> </div> </md-option> </md-select>
可以通過訪問 $ref.deactivate(),添加到 html 多選標簽:
ref="multiselect"
並在您的方法中調用它:
this.$refs.multiselect.deactivate()
也可以打開/切換
有關此 PR 的完整詳細信息,請閱讀此處
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.