Second Instance of Vue Autocomplete does not display array

user_5680952 0
Viewed 56

I'm trying to add a second instance of Vue Autocomplete to a fiddle:

I renamed the app, model, data, value and options values to app2, model2, etc.

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"]
  }
})

The second instance doesn't work. What is the best way to add a second Vue instance to an app?

vuejs2 vue-component vue.js javascript
2 Answers

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

Following blex's comment, I replaced data2 with data, value2 with value and options2 with options and it worked.

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"]
  }
})
user_56809520

You're running two apps and defining the same component twice. I'm guessing that's not really what you want. This would make a lot more sense:

<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

user_21850930
Related