代码写的地方错误么
我把代码写在Helo.vue 报错了,,,vue.esm.js?0006:564 [Vue warn]: Error in callback for watcher "items" 老师是故意写到 app.vue的吧,有什么原因吗
我改好了 不知道怎么删除提问...
我把代码写在Helo.vue 报错了,,,vue.esm.js?0006:564 [Vue warn]: Error in callback for watcher "items" 老师是故意写到 app.vue的吧,有什么原因吗
我改好了 不知道怎么删除提问...
2017-03-09
请问你找到解决方法了没有,我也和你出现了同样的错误
<template> <div id="app"> <h1 v-text="title"></h1> <ul> <input v-model="newItem" @keyup.enter="addNew"></input> <li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)"> {{item.label}} </li> </ul> </div> </template> <script> import Store from './store' export default { name: 'app', data () { return { title: 'This is a Todo List', items: Store.fetch(), newItem: '' } }, watch: { msg:{}, items: { handler: function (items){ Store.save(items) }, deep: true } }, methods: { toggleFinish: function (item) { console.log(item.isFinished=!item.isFinished) }, addNew: function(){ console.log(this.newItem) this.items.push({ label:this.newItem, isFinished: false }) this.newItem='' } } } </script> <style> .finished{ text-decoration: underline; } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
我用的是 vue 新版本
Hello.vue <template> <div class="hello"> <!-- {{}} 是 v-text=""的一个简写方式 --> <h1>{{ msg }}</h1> <!-- v-bind:class 简写:class="[XXX]" 也能取值--> <p :class="[pClass]">{{pClass}}</p> <input v-model="newItem" v-on:keyup.enter="addNew"> <ul> <!-- v-for 用法 --> <li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)"> {{item.label}} </li> </ul> <h2>Essential Links</h2> <ul> <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li> <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> <br> <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> </ul> </div> </template> <script> import Store from '../store' export default { name: 'hello', // function data(){ // return { // msg: 'Welcome to Your Vue.js App' // } // } data () { return { msg: 'Welcome to Your Vue.js App', // 返回一个数组 items: [ // { // label: 'coding', // isFinished: false // }, // { // label: 'walking', // isFinished: true // } ], pClass: 'myP', newItem: '' } }, watch: { msg: {}, items: { handler: function(val,oldVal){ Store.save(val); console.log(Store); }, deep:true //深层复制 } // items: { // // handler: function(val,oldVal){ // // console.log(JSON.stringify(val)+" "+JSON.stringify(oldVal)); // // } // handler: function(val,oldVal){ // Store.save(val); // console.log(Store); // }, // deep:true //深层复制 // } }, // 方法一定要写在这里 methods:{ toggleFinish: function(item){ item.isFinished=!item.isFinished; //console.log(item); }, addNew: function(){ //console.log(this.newItem); this.items.push({ label: this.newItem, isFinished: false }); this.newItem=''; } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .myP{ text-decoration: underline; } .finished{ text-decoration: underline; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
app.vue <template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> </div> </template> <script> // import 是 es6 的语法 import Hello from './components/Hello' // 类似 module.export = { } // export 项目会自动生成 new Vue({}) export default { name: 'app', components: { Hello } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
举报