为了账号安全,请及时绑定邮箱和手机立即绑定

代码写的地方错误么

我把代码写在Helo.vue 报错了,,,vue.esm.js?0006:564 [Vue warn]: Error in callback for watcher "items" 老师是故意写到 app.vue的吧,有什么原因吗



我改好了 不知道怎么删除提问...

正在回答

3 回答

[Vue warn]: Error in callback for watcher "items"   应该是你监听 items的时候有问题,你已经解决了我就不细看了

0 回复 有任何疑惑可以回复我~

请问你找到解决方法了没有,我也和你出现了同样的错误

<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>


0 回复 有任何疑惑可以回复我~

我用的是 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>


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
vue.js入门基础
  • 参与学习       209716    人
  • 解答问题       677    个

本门为vuejs入门教程,详细的讲解加实战,可以帮你进入vuejs的大门

进入课程

代码写的地方错误么

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信