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

【问题标题】：Default v-model value in vue-bootstrap-typeaheadvue-bootstrap-typeahead 中的默认 v-model 值
【发布时间】：2019-04-29 21:27:37
【问题描述】：

我正在学习 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

【问题讨论】：

您能解释一下您当前的代码是如何不起作用的吗？你想看到什么发生？这与实际发生的情况有何不同？

标签： vue.js

【解决方案1】：

github 提供了一种解决方法。您可以直接使用 ref 为 typeahead 设置 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

【讨论】：

我明白了，谢谢。 self.$refs.typeahead.inputValue = "苹果";