Vueを使用し、selectタグのvalueを取得したい

以下のようなコードを作成したのですが、
selectタグ内でのfruit.idの値の取得(設定？)方法がわかりません。。

inputタグを使った場合などはv-modelでリンクさせることができたのですが
試行錯誤しても""にしかなりません。

どなたかご教示お願いします。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
5  </head>
6  <body>
7    <div id="app">
8      リスト
9      <select>
10        <option v-for="fruit in fruits" v-bind:fruitId="fruit.id">
11          {{fruit.name}}
12        </option>
13      </select>
14
15      <button @click="getValue">表示</button>
16    </div>
17  </body>
18  <script>
19    new Vue({
20      el: "#app",
21      data: {
22        fruits: [
23          { name: "りんご", id: "ID0000" },
24          { name: "みかん", id: "ID0001" },
25          { name: "ぶどう", id: "ID0002" },
26        ],
27        fruitId: "",
28      },
29      methods: {
30        getValue: function () {
31          console.log(this.fruitId);
32          // ここが""になってしまう
33        },
34      },
35    });
36  </script>
37</html>

追記です。
valueとして取得したいのは、選択されたフルーツのidです。
りんごを選択→表示を押下→"ID0000"が出力される
というのが期待動作です。

yambejp

2021/08/17 09:24

ボタンとセレクトボックスの間に相関関係がありませんが、ボタンを押したことでなにをトリガーにセレクトボックスを参照するか目途はありますか？またセレクトボックスのoptionにvalueが指定されていないですが、命題のvalueとは何を想定していますか？

tmp-user

2021/08/17 10:12

トリガー・・・と言われると上手く説明できないのですが、this.fruitIdに選択されたもののidが入ってほしいです。記述が漏れていました。valueは"ID0000"等が入る想定です、修正いたします。

yambejp

2021/08/17 10:22

HTMLの構造とHTML要素の属性をもう少し練り直した方がよいかも（一応回答つけてあります）

行動規範の内容に同意します

回答3件

Vue2のドキュメントに具体的なサンプルがあります。

https://jp.vuejs.org/v2/guide/forms.html#%E9%81%B8%E6%8A%9E

HTML部分を修正すると次のようになると思います。（ v-for にはできるだけ :key も設定しましょう）

html
1<div id="app">
2  リスト
3  <select v-model="fruitId">
4    <option v-for="fruit in fruits" :key="fruit.id" :value="fruit.id">
5      {{fruit.name}}
6    </option>
7  </select>
8
9  <button @click="getValue">表示</button>
10</div>

投稿2021/08/17 10:32

mather

総合スコア6759

プルダウンで同期させたい場合、v-modelディレクティブ制御はselectタグに置きましょう。

vue
1<select v-model="fruitsId">
2        <option v-for="fruit in fruits" v-bind:fruitId="fruit.id">
3          {{fruit.name}}
4        </option>
5</select>
6 <button @click="getValue">表示</button>
7//中略
8 methods: {
9        getValue: function () {
10          console.log(this.fruitId); //プルダウンで選択された値が取得できるはず
11        },
12      },
13
14

投稿2021/08/17 09:40

FKM

総合スコア3647

ベストアンサー

javascript
1<div id="app">
2リスト
3<select>
4<option v-for="fruit in fruits" v-bind:value="fruit.id">
5{{fruit.name}}
6</option>
7</select>
8<button @click="getValue">表示</button>
9</div>
10<script>
11new Vue({
12  el: "#app",
13  data: {
14    fruits: [
15      { name: "りんご", id: "ID0000" },
16      { name: "みかん", id: "ID0001" },
17      { name: "ぶどう", id: "ID0002" },
18    ],
19  fruitId: "",
20  },
21  methods: {
22    getValue: function (e) {
23      console.log(e.target.previousElementSibling.value);
24    },
25  },
26});
27</script>