<script>
export default {
name: "Register",
props: {
msg: String,
},
};
</script><style scoped>
* {
box-sizing: border-box;
}
div {
padding: 0;
margin: 0;
font-family: system-ui;
}
.red {
color: red;
}<template>
<div class="pop-up-mask">
{{ msg }}
<div class="input-wrapper">
<div class="name-icon"></div>
<input type="text" class="input-section"
placeholder="Enter your Name" :maxlength="max" v-model="text" />
</div>
</div>
</template>
--------------in main.js--------------
new Vue({
data: {
max: 36,
text: ''
}
render: h => h(App),
}).$mount('#app')
It is essential to keep the input text within a limit of 30 characters. If exceeded, a message saying “You can enter 30 characters only.” should be displayed. Although conditions were set in both the template and main.js file, the functionality is not working as intended.