代码写的地方错误么
我把代码写在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>举报