vue.jsでdatalist要素内のどのoptionが選択されたかを取得したい

Question

前提・実現したいこと

vue.jsでdatalist要素内のどのoptionが選択されたかを取得したい。

下記のコードはまずAPI「some_api」から取得したJSONデータの特定のキー名「name」をdatalist要素内のoption要素に並べています。
そして、datalist内のoption選択（Changeイベントが発生した）タイミングで、どのoption要素が選択されたかをconsole.log()を使って書き出したいです。

発生している問題・エラーメッセージ

datalist要素はselect要素と違いvalue属性の値がテキストとして入力欄にそのまま表示される。そのためvalue属性に数字を入れてn番目を数える方法が使えません。
また、selectObject.selectedIndexプロパティはdatalist要素には使えないようです。
indexOf()を使えばいいのかなと考えているのですが、でうまく取得する方法がわからず困っています。
また、v-modelにはPOST用の

該当のソースコード

<input type="text" list="list" id="input_field" @change="getNthOption" v-model="post_data.name">
<datalist id="list">
    <option v-for="(item, index) in items" :key="index" :value="item.name"></option>
</datalist>
<script>
import "es6-promise/auto";
import axios from 'axios';
export default {
data() {
　　　　return {
　　　　post_data: {
                name: '',
            },
        }
    },
created() {
        this.init();
    },
methods: {
    init() {
            const api = axios.create();
            axios.all([
                api.get(`${ this.$root.domain }some_api`, this.$root.setAxiosConfig()),
            ]).then( axios.spread( (res) => {
                const data = res.data.Result.Items;
                this.items = data;
            }))
            .catch((err)=> {
                console.warn('err', err);
            });
        },
    getNthOption(){
            axios.get(`${ this.$root.domain }some_api`, this.$root.setAxiosConfig())
            .then((res)=> {
                //現在は1番目のoptionを取得しています
                console.log(res.data.Result.Items.splice(res, 1)[0])
                //ここに選択されたn番目のoption要素を取得したい
            })
            .catch((err)=> {
                console.warn('err', err);
            });
        }
    }
}
</script>

補足情報（FW/ツールのバージョンなど）

vue v2.5.22
Chrome v71

Answer 1

<input>タグにv-modelを設定すれば入力は取得できるのでサンプルコード書くとこんな感じでしょうか。
使い回すことを考えると<datalist>のid属性はpropsで設定するようにしたほうが良いです。

<template>
  <div>
    <input type="text" :list="listId" v-model="value" @change="onChange" />
    <datalist :id="listId">
      <option
        v-for="(item, index) in items"
        :key="index"
        :value="item.name"
      ></option>
    </datalist>
  </div>
</template>

<script>
export default {

  props: {
    listId: {
      type: String,
      required: true
    }
  },

  // computed.selectedOption でエラーが出てしまうので初期化必須。
  data() {
    return {
      value: '',
      items: [{ name: "foo" }, { name: "bar" }]
    }
  },

  computed: {
    // 選択中のオプションオブジェクト。任意入力値の場合は null を返す
    selectedOption() {
      const selected = this.items.find(item => item.name === this.value)
      return selected || null
    }
  },

  methods: {
    onChange() {
      console.log(this.selectedOption)
    }
  }

}
</script>

Comments

[hibikikudo]

ご回答いただきどうもありがとうございます。
上記のコードを参考に動かすことができました。
算出プロパティ（computed）をこんな風に使うという事を知りました！