https://github.com/vuejs/vue-class-component/issues/88
HTML
<div id="app">
<test-input v-model="model.test"></test-input>
<p>{{ model.test }}</p>
</div>
<!-- Importing libs and setup -->
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/vue-class-component@latest/dist/vue-class-component.js"></script>
<script>
var s = document.querySelector('script[type="text/babel"]')
s.setAttribute('data-presets', 'stage-2')
s.setAttribute('data-plugins', 'transform-class-properties,transform-decorators-legacy')
window.Component = VueClassComponent.default
</script>
Babel + JSX
@Component({
name: 'test-input',
template: `<input
type="text"
v-bind:value="value"
v-on:input="updateValue($event.target.value)"
/>`,
props: {
value: String
}
})
class TestInput extends Vue {
updateValue(value) {
this.$emit('input', value);
}
}
new Vue({
el: '#app',
data: {
model: {
test: 'test'
}
},
components: {
TestInput
}
})