Vue Autocomplete 的第二个实例不显示数组答案

【问题标题】：Second Instance of Vue Autocomplete does not display arrayVue Autocomplete 的第二个实例不显示数组
【发布时间】：2020-12-20 18:14:28
【问题描述】：

我正在尝试将 Vue Autocomplete 的第二个实例添加到小提琴中：

我将 app、model、data、value 和 options 值重命名为 app2、model2 等。

Vue.component("typeahead", VueStrap.typeahead);

var app = new Vue({
  el: "#app",
  data: {
    value: null,
    options: ["foo", "bar", "baz"]
  }
})

Vue.component("typeahead2", VueStrap.typeahead);

var app2 = new Vue({
  el: "#app2",
  data2: {
    value2: null,
    options2: ["qwerty", "apple", "jon"]
  }
})

第二个实例不起作用。向应用添加第二个 Vue 实例的最佳方式是什么？

【问题讨论】：

将data2 替换为data，将value2 替换为value，将options2 替换为options，它会起作用（Vue 不知道data2 是什么）
所以这些是保留字？谢谢。现在可以了。
它们并不是真正的“保留字”，但是当你创建一个组件时，Vue 会在你提供给它的 Object 中寻找一个属性 data。如果你给它一个foo 属性，或者一个data2 属性，它甚至不会看它
知道了。谢谢。我会把这个留给其他初学者。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您正在运行两个应用程序并两次定义相同的组件。我猜这不是你真正想要的。这会更有意义：

<div id="app">
  <typeahead v-model="value" :data="options"></typeahead>
  <typeahead v-model="value2" :data="options2"></typeahead>
</div>

Vue.component("typeahead", VueStrap.typeahead);

var app = new Vue({
  el: "#app",
  data: {
    value: null,
    value2: null,
    options: ["foo", "bar", "baz"],
    options2: ["qwerty", "apple", "jon"]
  }
})

jsFiddle demo

【讨论】：

这是一种更好的方法。我接受了这个答案。我还想知道在同一页面上运行两个组件的最佳做法。
我会更进一步，定义一个typeaheads 数组并在标记中使用<typeahead v-for="(ta, key) in typeaheads" :key="key" v-model="ta.value" :data="ta.data" />。
两个，是的，也许。对于 3 个或更多，可能是的。

【解决方案2】：

https://jsfiddle.net/3r06job7/13/

根据 blex 的评论，我将 data2 替换为 data，将 value2 替换为 value，将 options2 替换为 options，并且成功了。

Vue.component("typeahead", VueStrap.typeahead);

var app = new Vue({
  el: "#app",
  data: {
    value: null,
    options: ["foo", "bar", "baz"]
  }
})

Vue.component("typeahead2", VueStrap.typeahead);

var app2 = new Vue({
  el: "#app2",
  data: {
  value: null,
  options: ["qwerty", "apple", "jon"]
  }
})

【讨论】：