【Vuejs】 bind the values ​​of parent and child components in two directions

	<template id="rxselect">
	<select v-model="innerValue">
	<option
	v-for="[k,v] in map"
	:value="k"
	:key="k"
	>{{v}}</option>
	</select>
	</template>
	<div id="app">
	The currently selected gender is:
	{{map.get(gender)}}
	<div>
	<rx-select :map="map" v-model="gender" />
	</div>

view raw index.html hosted with ❤ by GitHub

	Vue.component("RxSelect", {
	model: {
	prop: "value",
	event: "change",
	},
	props: {
	value: [Number, String],
	map: Map,
	},
	computed: {
	innerValue: {
	get() {
	return this.value;
	},
	set(val) {
	this.$emit("change", val);
	},
	},
	},
	template: "#rxselect"
	});
	new Vue({
	el: "#app",
	data: {
	map: new Map().set(1, "Keep secret").set(2, "Male").set(3, "Female"),
	gender: "",
	},
	});

view raw script.js hosted with ❤ by GitHub

	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.6/rxjs.umd.min.js"></script>

view raw scripts hosted with ❤ by GitHub

vue using v-model to bind the values ​​of parent and child components in two directions

A Pen by Edward Lance Lorilla on CodePen.

License.

view raw vue-using-v-model-to-bind-the-values-of-parent-and-child-components-in-two-directions.markdown hosted with ❤ by GitHub