尝试一个可编辑的 vue.js 自动完成组件

Question

有下一个示例代码：

https://jsfiddle.net/JLLMNCHR/09qtwbL6/96/

HTML:

<div id="app">

<button type="button" v-on:click="displayVal()">Button1</button>

  <autocomplete v-model="nombre" :items="[ 'Apple', 'Banana', 'Orange', 'Mango', 'Pear', 'Peach', 'Grape', 'Tangerine', 'Pineapple']" />

<button type="button" v-on:click="displayVal()">Button2</button>

</div>

<script type="text/x-template" id="autocomplete">

  <div class="autocomplete">

    <input type="text" @input="onChange" v-model="search" @keyup.down="onArrowDown" @keyup.up="onArrowUp" @keyup.enter="onEnter" />

    <ul id="autocomplete-results" v-show="isOpen" class="autocomplete-results">

      <li class="loading" v-if="isLoading">

        Loading results...

      </li>

      <li v-else v-for="(result, i) in results" :key="i" @click="setResult(result)" class="autocomplete-result" :class="{ 'is-active': i === arrowCounter }">

        {{ result }}

      </li>

    </ul>

  </div>

</script>

CSS：

#app {

  font-family: "Avenir", Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  color: #2c3e50;

  margin-top: 60px;

}

.autocomplete {

  position: relative;

  width: 130px;

}

.autocomplete-results {

  padding: 0;

  margin: 0;

  border: 1px solid #eeeeee;

  height: 120px;

  overflow: auto;

  width: 100%;

}

.autocomplete-result {

  list-style: none;

  text-align: left;

  padding: 4px 2px;

  cursor: pointer;

}

.autocomplete-result.is-active,

.autocomplete-result:hover {

  background-color: #4aae9b;

  color: white;

}

我想问你我必须做些什么才能实现 displayVal 在自动完成中显示选定的值，或者用户在字段中写入的值，以防它不在列表中。

另外应该怎样做才能让 Button2 也显示出来？

Answer 1

更新演示。复制this.$emit("input", this.search);到setResult问题 1添加</autocomplete>问题2。 <autocomplete v-model="nombre" :items="[ 'Apple', 'Banana', 'Orange', 'Mango', 'Pear', 'Peach', 'Grape', 'Tangerine', 'Pineapple']" ></autocomplete>