Two way binding between components at same level in vue.js

Question

While using the typeahead https://github.com/pespantelis/vue-typeahead can I do two binding between search term of two typeahead, so basically it should not matter into which search box the user is typing but both should return data but from different endpoints?

<typeahead ep="http://localhost:8080/ep1"></typeahead>
<typeahead ep="http://localhost:8080/ep2"></typeahead>

Answer 1

Yes. Just pass the same value to both components.

<typeahead ep="foo" v-model="someValue"></typeahead>
<typeahead ep="bar" v-model="someValue"></typeahead>

Then in your component when you this.$emit the value you pass back to the parent both will update.

Here's a very minimal example:

Vue.component('typeahead', {
  template: '<div><input v-model="displayValue"> on {{ endpoint }}</div>',
  props: {
    value: String,
    endpoint: String,
  },
  computed: {
    displayValue: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('input', value)
      },
    },
  },
})

and here it is on a fiddle with some common scenarios like changing the value from parent, making sure the parent data updates as you change the child, etc: https://jsfiddle.net/crswll/tLmszrp2/