質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.93%

セレクトボックスの値を変更した際のv-modelの挙動について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 122

study_111

score 75

Vue.jsを学習中なのですが、セレクトボックスの挙動で疑問な点があります。

<template>
    <div>
        <div>

            <select v-model="eventData.location">
                <option v-for="location in locations" :key="location">{{location}}</option>    
            </select>
            <p>{{ eventData.location }}</p>
        </div>
    </div>
</template>

<script>
import LikeHeader from './components/LIkeHeader';
import About from './components/About';
import Home from './components/Home';

export default {
    data() {
        return {
            number:14,
            currentComponent:'Home',
            locations:["東京","大阪","名古屋"],
            eventData:{
                title:"",
                maxNumber:0,
                host:"",
                detail:"",
                isPrivate:false,
                target:[],
                price:"無料",
                location:"東京",
            }
        };
    },
    components:{
        LikeHeader:LikeHeader,
        About:About,
        Home:Home,
    }
};

</script>


こちらのコードのselect v-model="eventData.location"部分のlocationはdataメソッドのプロパティの「location」を指しており、v-for="location in locations"locationはdataメソッド内の「locations」配列の一つ一つの要素を指しているかと思います。
その為、2つには関連性が何もないかと思うのですが、セレクトボックスの値を変更すると、<p>{{ eventData.location }}</p>に表示される値がセレクトボックスに指定した値に変更されます。
こちらは何故このような挙動になるのでしょうか。
アドバイス頂けましたら幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

セレクトボックスの値を変更すると、<p>{{ eventData.location }}</p>に表示される値がセレクトボックスに指定した値に変更されます。
こちらは何故このような挙動になるのでしょうか。

まず、v-modelはv-bindとv-onを2個1にしたディレクティブです。
参考サイトを見ると

<input v-model="searchText">
<input :value="searchText" @input="searchText = $event.target.value">


となっているので、今回の場合は(雰囲気で書いてるので実際は違うかも)

 <select v-model="eventData.location">
 <select :value:"eventData.location" @change="eventData.location = $event.target.value" 


と、こんな感じでイベントが発生した時に、eventData.locationの値を、<option>value</option>の値で上書きしているからです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/16 18:48 編集

    ご回答ありがとうございます。
    感覚的には、optionの値が変わった際(新たに値が選択された時)に、selectとoptionが関連づいているために、changeイベントが発生し、そのイベント発生したことにより指定された値が、eventData.locationに代入されるといった形でしょうか?

    キャンセル

  • 2020/07/20 09:21 編集

    返答遅くなってごめんなさい。。。

    そうです!
    「:value:"eventData.location"」で「<select><option>・・・</option><select>」の値と紐づけて初期値を設定、
    「@change="eventData.location = $event.target.value" 」で「eventData.location」に「select」の値を代入しています。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る