Question

我正在尝试编辑已存在但由Vue组成的JS库。所以我学了一点Vue。问题是我制作了名为“ Analysis”的子组件，并希望锚定功能。我做了标记并将'moveAnchor'方法绑定到onclick，也在方法部分声明了'moveAnchor'。但这没用。我该如何解决？很抱歉，我没有经验。.：（

它是分析的script.js。

import { mapActions, mapState } from 'vuex';
export default {
  name: 'Analysis',
  computed: {
    checkName : function(){
      var flag = this.$store.state.analysis.name;
      if(flag.indexOf("/PCs/") != -1){
        console.log(flag);
      }
  }
  },
  methods: {
    moveAnchor: function (id){
      var div = document.getElementById(id).scrollIntoView();
  }

它是分析的template.html。

<div :class="$style.scrollarea">
 <div :class="$style.dropdown">
      <button :class="$style.dropbtn">Analysess</button>
 <div :class="$style.dropContent">
 <a v-for="item in analyData" v-bind:key="item.id" @onclick="moveAnchor(item.id)">
  {{ item.title }}
 </a>
 </div>
 </div>
 <span>
      {{ checkName }}
 </span>
 <div v-for="item in analyData">
      <h1 v-bind:id="item.id">{{ item.title }}</h1>
      <img v-bind:src="item.src" style="width: 100%; height: auto">
 </div>

Answer 1

欢迎使用StackExchange！

Vue的click事件的正确绑定是v-on:click或简写为@click。因此，当您编写@onclick时，Vue将永远不会调用它。

只需将@onclick更改为@click，一切都可以正常工作。

在Vue＆Vuex中，如何激活子组件中的onclick方法？

1 个答案: