Vue 中清除事件的 md-autocomplete答案

【问题标题】：md-autocomplete on clear event in VueVue 中清除事件的 md-autocomplete
【发布时间】：2019-12-01 14:44:12
【问题描述】：

我希望在清除 md-autocomplete 的输入框时实现一个功能。更具体地说，当按下“X”按钮清除字段时，我想将变量（data_on）更改为 false。我查看了docs，似乎没有清除输入的事件。这是我的组件目前的样子：

<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>

【问题讨论】：

是否需要跟踪按钮的点击，还是清除字段时更重要？

标签： javascript vue.js material-design materialize

【解决方案1】：

使用computed 是诀窍。

函数如下：

  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 显示/隐藏。

【讨论】：