How to bind components with vue js?

Question

I have form and select components. In fact things are simple: I need two binding model.

The parent component:

    Vue.component(\'some-form\', {
      te         


        

Answer 1

Here is your countries component updated to support v-model.

Vue.component('countries', {
  template: `
  <label for="">
    <select v-model="countryName">
      <option value="0">Select the country!</option>
      <option v-for="item in items" v-bind:value="item.name">{{ item.name }}</option>
    </select>
  </label>
  `,
  data: function () {
    return {
      items: {
        "0": {
          "id": 3,
          "name": "Afghanistan"          
        },
        "1": {
          "id": 4,
          "name": "Afghanistan2"          
        },
        "2": {
          "id": 5,
          "name": "Afghanistan3"          
        }
      },
    }
  },
  props: ['value'],
  computed:{
    countryName: {
      get() { return this.value },
      set(v) { this.$emit("input", v) }
    }
  },
});

v-model is just sugar for setting a value property and listening to the input event. So to support it in any component, the component needs to accept a value property, and emit an input event. Which property and event are used is configurable (documented here).