vue.js - Buefy 自动完成搜索 在右侧添加清除图标？

Question

我在我的 vue-cli 项目中使用 Buefy。如何在自动完成的右侧添加一个清除图标？

https://buefy.org/documentation/autocomplete/

Answer 1

从v0.8.20 开始，该b-autocomplete组件支持clearable启用清除按钮的标志：

<b-autocomplete clearable />

const data = [
  {"id":1,"user":{"first_name":"Jesse","last_name":"Simmons"},"date":"2016/10/15 13:43:27","gender":"Male"},
  {"id":2,"user":{"first_name":"John","last_name":"Jacobs"},"date":"2016/12/15 06:00:53","gender":"Male"},
  {"id":3,"user":{"first_name":"Tina","last_name":"Gilbert"},"date":"2016/04/26 06:26:28","gender":"Female"},
  {"id":4,"user":{"first_name":"Clarence","last_name":"Flores"},"date":"2016/04/10 10:28:46","gender":"Male"}
]

const example = {
  data() {
    return {
      data,
      name: '',
    }
  },
  computed: {
    filteredDataObj() {
      return this.data.filter(option => {
        return (
          option.user.first_name
          .toString()
          .toLowerCase()
          .indexOf(this.name.toLowerCase()) >= 0
        )
      })
    }
  }
}

const app = new Vue(example)
app.$mount('#app')

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy@0.9.4/dist/buefy.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/buefy@0.9.4/dist/buefy.min.css">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">

<div id="app" class="container">
    <section>
        <b-field label="Find a name">
            <b-autocomplete
                v-model="name"
                placeholder="e.g. Anne"
                :data="filteredDataObj"
                field="user.first_name"
                clearable
            >
            </b-autocomplete>
        </b-field>
    </section>
</div>