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

Question

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」配列の一つ一つの要素を指しているかと思います。
その為、２つには関連性が何もないかと思うのですが、セレクトボックスの値を変更すると、<p>{{ eventData.location }}</p>に表示される値がセレクトボックスに指定した値に変更されます。
こちらは何故このような挙動になるのでしょうか。
アドバイス頂けましたら幸いです。

Answer 1

セレクトボックスの値を変更すると、<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>の値で上書きしているからです。

Comments

[study_111]

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

[Arice_Banan]

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

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