v-on:单击组件不起作用答案

【问题标题】：v-on:click in component not workingv-on:单击组件不起作用
【发布时间】：2018-01-06 02:19:23
【问题描述】：

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

【问题讨论】：

标签： html vue.js components

【解决方案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>'
}

【讨论】：

你说的方法不接受函数是对的，所以我改了代码，但还是不行。
您的代码中可能有错误。正如您在此处看到的那样，它应该可以正常工作：codepen.io/Aer0/pen/GvoGjq?editors=1010

【解决方案2】：

有一些问题导致破解。

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

正确的演示发布在https://jsfiddle.net/atsknydr/

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

}

【讨论】：

我相信他正在尝试将整个功能分离到一个组件中。您的解决方案有效，但是您杀死了他的组件。

【解决方案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>

【讨论】：