<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Client LAB</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<div class="col-md-4 col-md-offset-4">
<year-select v-model="year"></year-select>
<button class="btn btn-primary" @click="handleClick">Submit</button>
</div>
</div>
</div>
<script>
// Vue.component('year-select', {
// template: `
// <select class="form-control" v-model="value">
// <option value="2019">2019</option>
// <option value="2018">2018</option>
// <option value="2017">2017</option>
// </select>
// `,
// data() {
// return {
// value: this.$attrs.value,
// };
// },
// watch: {
// value(value) {
// this.$emit('input', value);
// },
// },
// });
Vue.component('year-select', {
template: `
<select class="form-control" @input="(event) => $emit('input', event.target.value)">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
</select>
`,
});
const App = new Vue({
el: '#app',
data() {
return {
year: '2017',
};
},
methods: {
handleClick() {
console.log(this.year);
},
},
});
</script>
</body>
</html>
Last active
September 16, 2019 20:20
-
-
Save bryandidur/0f03dc6854c640955b0d07e48395b6da to your computer and use it in GitHub Desktop.
Vue model between component
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment