关于vue中一直提示未定义错误,求解释
发布于 3 个月前 作者 ZJH9Rondo 1950 次浏览 来自 问答

想让span中读取remaining的值,但是一直显示未定义,但是我在计算属性中已经写了啊,就算不用计算属性直接声明在data中也报错,报错信息都一样,如下

vue.js:465 [Vue warn]: Property or method "remaining" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
  • 这是js代码,method中不涉及此问题
	new Vue({
		el: "#todo",
		data: {
		  newTodoText:'',
		  newtodos:[],
		  outtodos:[]
		},
		computed: {
		  remaining: function (){
			return this.newtodos.length;
		  }
  	},

html代码

	<div id="todo">
      <input type="text" name="name" placeholder="add what you want to do" v-model="newTodoText" v-on:keyup.enter="addTodo">
      <ul>
        <li
          v-for="(todo,index) in outtodos"
          v-bind:class="{ed: todo.status}"
          class="ing"
          >
            <input type="checkbox" :checked="todo.status" v-on:click="Completed(index)">
            <label>{{todo.title}}</label>
            <button v-on:click="removeTodo(index)">x</button>
        </li>
      </ul>
      <div>
        <span>{{remaining}}</span>
        <input type="button" value="All" v-on:click="getAll()">
        <input type="button" value="Active" v-on:click="getActive">
        <input type="button" value="Completed" v-on:click="getCompleted">
        <input type="button" value="Clear" v-on:click="cleartodos">
      </div>
    </div>
5 回复

求解释

	computed: {
	  remaining: function (){
	    if(this.newtodos) {
			return this.newtodos.length;
		}
	  }
	  
	  
	  这样试试呢。~~

@ipengyo 不行,还是一样的错误

楼主,我也运行了你的代码,将相关事件移除后,没有任何错误,列表可以显示,remaining值可以改变 QQ截图20170801103423.png

回到顶部