CODEWITHSUNDEEP
javascriptvue.js
Sikander
Sikander

Reputation: 23

VUE: Uncaught TypeError: Cannot read property 'length' of undefined

I am following a vue tutorial. Below is the function to implement 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}`;
    }
  },
}

Everything else is working fine but this char_limit is giving below error

(i did not post data , methods etc since these were working fine )

Cannot read property 'length' of undefined
    at Proxy.char_limit (Userprofile.vue?5045:102)

can someone advise me what's the issue with code

Upvotes: 1

Views: 733

Answers (1)

Amaarockz
Amaarockz

Reputation: 4684

define the variables inside the data section like

export default {
  name: 'Userprofile',
  data() {
    return {
      newTwootcontent: '',
      twootType: 'instant',
    };
  }
    computed:{
    char_limit(){
      return this.newTwootcontent.length;
    },
    fullname(){
      return `${this.users.fname} ${this.users.lname}`;
    }
  },
}

Upvotes: 1

Related Questions