I'm looking to implement a function when the input box of md-autocomplete is cleared. More specifically, when the 'X' button is pressed to clear the field, i'd like to change a variable (data_on) to false. I looked at the docs and there doesn't seem to be an event for clearing the input. Here is what my component currently looks like:
<template>
<div class="md-auto">
<md-autocomplete v-model="selected" :md-options="users" :md-fuzzy-search="false">
<label id="placehold" v-if="selected == null || selected == ''">Start typing...</label>
<template slot="md-autocomplete-item" slot-scope="{ item, term }">
<md-highlight-text id="mdtxt" :md-term="term">{{ item }}</md-highlight-text>
</template>
<template slot="md-autocomplete-empty" slot-scope="{ term }">
"{{ term }}" is not currently on file. <a @click="noop()">You can add them here</a>.
</template>
</md-autocomplete>
<div class="md-layout md-gutter">
<transition name="fade">
<a class="selectlink" v-if="selected != null && selected !=''" id="link-effect-4" v-on:click="show_data()">Select</a>
</transition>
</div>
<div class="md-layout md-gutter">
<transition name="fade">
<span v-if="data_on && selected != null && selected != ''">
<h1>{{ data_display }}</h1>
</span>
</transition>
</div>
</div>
</template>
Using computed was the trick.
Here's the function:
computed: {
data_on () {
if (this.selected != null && this.selected != '' && this.users.includes(this.selected)) {
this.view_link = true
return true
} else {
this.data_display = null
this.view_data = false
return false
}
}
}
If you add: v-if="data_on"
to an element, it will show/hide based on data_on.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.