javascript - Vue 中清除事件的 md-autocomplete
问题描述
我希望在清除 md-autocomplete 的输入框时实现一个功能。更具体地说,当按下“X”按钮清除字段时,我想将变量(data_on)更改为 false。我查看了文档,似乎没有清除输入的事件。这是我的组件当前的样子:
<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>
解决方案
使用计算是诀窍。
这是功能:
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
}
}
}
如果您将:添加v-if="data_on"
到元素,它将根据 data_on 显示/隐藏。
推荐阅读
- java - Java:初学者问题:为什么我没有从这段代码中得到数字(1、4、9、16、25、36、49)[已解决]
- python - 如何根据比较两列中的值来组合熊猫数据框中的行?
- mysql - 连接到不特定的数据库名称
- typescript - 没有正确推断泛型的类型?
- json - 将 json 值转换为枚举值
- java - 如何知道 Room 的 onCreate() 回调结束
- sql - 如何使用联合获得不同的记录 postgresql
- reporting-services - SSRS 切换添加列,将报告导出到 Excel 时
- excel - 如何获取形状名称(Groupshapes 名称)
- angular - 允许在 Angular 9 中选择禁用的表单控件