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必须使用功能，而不是对象。

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

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

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

Answer 2

有一些问题导致破解。

在函数appendcontent中，您应该调用数据“this.homepage.numberofdivs”。

并在https://jsfiddle.net/atsknydr/

上发布了正确的演示

methods : {
  appendcontent: function() {
    this.homepage.numberofdivs += 60;
    console.log(this.homepage.numberofdivs);
}

}

Answer 3

首先，正如警告所说：

[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.

因此，您应该创建一个像<div id="app"></div>这样的元素来装载您的应用而不是<body>。

您遇到的问题是范围问题。您正试图从组件范围内部调用方法，这就是为什么它没有找到方法。

请查看docs以便更好地理解。

因此，为了完成这项工作，您应该将方法从应用程序范围更改为模板范围。

您的 html ：

<body>
    <div id="app">
        <bottomcontent></bottomcontent>
    </div>
</body>

您的 js ：

<script>
var bottomcontent = {
    template: '<div class="bottomcontent"><div class="moreresults" v-on:click="appendcontent">More Results</div></div>',
    data: function () {
        return {
            homepage: {
                numberofdivs: 60
            }
        }
    },
    methods: {
        appendcontent: function () {
            console.log('Called method!');
            this.homepage.numberofdivs += 60
        }
    }
}

new Vue({
    el: '#app',
    components: {
        'bottomcontent': bottomcontent
    }
})
</script>

v-on：单击组件不工作

3 个答案: