Vue.jsのselectでプリミティブな値ではなくオブジェクトを返すサンプル。

Vue.jsのselectでプリミティブな値ではなくオブジェクトを返すサンプルです。

selectのオプションに相当する変数をvalueとtextの辞書配列に合わせると、素のvueだけではなくbootstrap-vueなどにも応用が簡単です。

SelectSample.vue

<template>
  <div>
    <select v-model="country" @change="change_country">
      <option v-for="(c , i) in country_list" :key="i" :value="c.value">{{ c.text }}</option>
    </select>
    <center v-if="country">
      <table>
        <thead>
          <th>key</th>
          <th>value</th>
        </thead>
        <tbody>
          <tr v-for="(k , i) in Object.keys(country)" :key="i">
            <td>{{ k }}</td>
            <td>{{ country[k] }}</td>
          </tr>
        </tbody>
      </table>
    </center>
  </div>
</template>

<script>
export default {
  name: "SelectSample",
  data: function() {
    return {
      country: null
    };
  },
  computed: {
    country_list: () => {
      return [
        { value: null, text: "国を選択してください。" },
        {
          value: {
            name: "中華人民共和国",
            alpha: "CHN",
            population: 1349335152
          },
          text: "中華人民共和国"
        },
        {
          value: { name: "インド", alpha: "IND", population: 1224514327 },
          text: "インド"
        },
        {
          value: {
            name: "アメリカ合衆国",
            alpha: "USA",
            population: 310383948
          },
          text: "アメリカ合衆国"
        }
      ];
    }
  },
  watch: {
    /*
    country: selected_country => {
      console.log(JSON.stringify(selected_country));
    }
    */
  },
  methods: {
    change_country: function() {
      console.log(JSON.stringify(this.country));
    }
  }
};
</script>

<style scoped>
table {
  margin: 0 auto;
  border-collapse: collapse;
}
table th,
table td {
  padding: 0.2rem 2rem;
  border: solid 1px #333;
}
</style>

Codepenの動作サンプル
(※Codepenってpenじゃなくprojectは埋め込めないのかな？？)

https://github.com/qoAopx/vue-select-sample