Attempting to design a customized component in Vue.
This basic component I have created seems to consistently have an undefined value prop.
<template>
<div>
- {{ value }} -
</div>
</template>
<script>
export default {
props: ['value'],
mounted() {
console.log(this.value);
}
}
</script>
No special actions are taken when calling it:
<el-text-group v-model="testVar"></el-text-group>
{{ testVar }}
The variable testVar appears fine, but the custom component does not display anything?
I've gone through multiple tutorials and the official documentation:
https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events
Currently using Vue 2.4.2. Worked without issues on Vue 2.2.x.
This issue was encountered months ago, hoped for a fix, but upon retesting, the problem persists. Seems like a fundamental issue, uncertain if there has been a change in implementation?
FILES:
app.js
var component = require('./components/App.vue');
component.router = Vue.router;
new Vue(component).$mount('#app');
App.vue
<template>
<div>
Hello
<hr/>
<test-cpt v-model="testVar"></test-cpt>
</div>
</template>
<script>
export default {
data() {
return {
testVar: 'test'
};
},
components: {
testCpt: require('./TestCpt.vue')
}
}
</script>
TestCpt.vue
<template>
<div>
- {{ value }} -
</div>
</template>
<script>
export default {
props: ['value']
}
</script>