html - v-on :click in component not working

Question

一个 vue.js 组件创建了一个应该调用函数的按钮，但该函数从未被调用并且 v-on:click 在 Chrome 的元素检查中不可见。我的 html 是这样的:

<bottomcontent></bottomcontent>

而我的 Vue 是这样的:

var bottomcontent = {
  template: '<div class="bottomcontent"><div class="moreresults" v-on:click="appendcontent">More Results</div></div>'
}
new Vue({
  el : 'body',
  data : {
    homepage:{
      numberofdivs: 60
    }
  },
  methods : {
      appendcontent: function() {
        homepage.numberofdivs += 60
    }
  },
  components: {
    'bottomcontent': bottomcontent
  }
})

Answer 1

问题是方法必须使用函数，而不是对象。

methods: {
  appendcontent: function() {
    homepage.numberofdivs += 60
  }
}

您还必须相应地更正您的标记。

var bottomcontent = {
  template: '<div class="bottomcontent"> <div class="moreresults" v-on:click="appendcontent"> More Results </div></div>'
}