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

Question

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

first check out the basics, Data and Methods: vuejs.org/v2/guide/instance.html#Data-and-Methods — Lawrence Cherone
– Lawrence Cherone, Commented Jan 29, 2021 at 14:19
@LawrenceCherone i have added methods and data and it was working find , pls let me know if i should post that code as well — Sikander
– Sikander, Commented Jan 29, 2021 at 14:22
post code as-is, else as-is you're defining what should be in data on the vue instance which is wrong, hence the error — Lawrence Cherone
– Lawrence Cherone, Commented Jan 29, 2021 at 14:24
@LawrenceCherone as per answer by Amaarrockz i defined newTwootcontent inside data and it solved the issue , Thanks — Sikander
– Sikander, Commented Jan 29, 2021 at 14:26

Amaarockz · Accepted Answer · 2021-01-29 14:23:21Z

1

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}`;
    }
  },
}

answered Jan 29, 2021 at 14:23

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sikander Over a year ago

sure in few minutes it will allow to accept , just one clarification all the properties need to be defined inside data ? pls confirm

Amaarockz Over a year ago

Yes all the variables should be defined in data

Amaarockz Over a year ago

Only then they can be accessed using 'this' operator. Also do not confuse computed and methods with the data variables since they can also be accessed using 'this' operator

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related