I've been diligently following a Vue tutorial. Here's the snippet of code that I'm using to enforce a character limit on a text area:
<form action="" class="create-twoot" @submit.prevent="createnewTwoot">
<label for="new-twoot">New Twoot</label>
<p>{{char_limit}}/180</p>
<textarea name="" id="new-twoot" cols="30" rows="4" v-model="newTwootcontent"></textarea>
<br/>
<label for="newTwootType">Twoot Type</label>
<select name="TwootType" id="newTwootType" v-model="twootType">
<option :value="option.name" v-for="(option,index) in twootTypes" :key="index">
{{option.value}}
</option>
</select>
<br/>
<button>Tweet</button>
</form>
JS CODE
export default {
name: 'Userprofile',
newTwootcontent: '',
twootType: 'instant',
computed:{
char_limit(){
return this.newTwootcontent.length;
},
fullname(){
return `${this.users.fname} ${this.users.lname}`;
}
},
}
While most parts of my project are functioning smoothly, there seems to be an issue with the char_limit function resulting in the following error:
(I haven't included data, methods, etc. as they are working fine)
Cannot read property 'length' of undefined
at Proxy.char_limit (Userprofile.vue?5045:102)
Any suggestions on what might be causing this problem?