Question

VUE：未捕获的类型错误：无法读取未定义的属性“长度”

2021-01-29

728

javascript vue.js

我正在学习 Vue 教程。下面是实现文本区域字符限制的函数，

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

其他一切都运行正常，但这个 char_limit 给出了以下错误

（我没有发布数据、方法等，因为这些都运行正常）

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

有人可以告诉我代码有什么问题吗

Answer 1

在数据部分内定义变量，如

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