javascript - Vue Autocomplete 的第二个实例不显示数组

Question

我正在尝试将 Vue Autocomplete 的第二个实例添加到 fiddle 中:
我将 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 实例添加到应用程序的最佳方法是什么？

Answer 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