Embarking on my Vue.js coding journey, I am currently following a straightforward online tutorial. Utilizing the vue-cli, I kickstarted my application and crafted a basic component named Test.vue. Within this component lies a simplistic input control connected to the message property of my model:
Test.vue
<template>
<div
<input
type="text"
v-model="message"/>
<br/>
<p>The value of the input is: {{ message }}</p>
</div>
</template>
<script>
export default {
data:{
message: 'My name'
}
};
</script>
<style>
</style>
Subsequently, I incorporated this component within the <App />. However, an issue arises as the text entered inside the input box fails to update the <p> element...
https://i.sstatic.net/TXFiN.png
Where might I have gone astray? Despite its apparent simplicity, any suggestions or guidance towards rectification would be greatly appreciated. Thank you in advance.