vue-bootstrap-typeahead中的默认v-model值

Question

我正在使用vue js学习提前输入。我想问一下如何设置食物的默认值？

<vue-bootstrap-typeahead
    :data="list"
    v-model="food"
/>

data() {
    return {
        //Not work
        food: 'Apple',
        list: [],'
    }
}

仅供参考：https : //www.npmjs.com/package/vue-bootstrap-typeahead

Answer 1

github有一个解决方法。您可以使用ref直接设置inputValue：

<template>
  <div id="app">
    <vue-bootstrap-typeahead :data="list" v-model="food" ref="typeahead" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  data: function() {
    return {
      food: "Apple",
      list: ["Aardvark", "Apple", "Beach", "Bear"]
    };
  },
  components: {
    HelloWorld
  },
  mounted() {
    this.$refs.typeahead.inputValue = "Apple";
  },
  methods: {}
};
</script>

https://codesandbox.io/s/6xn4y5321k