时间戳

首页 > 解决方案 > 在 Vue&Vuex 中，如何在子组件中激活 onclick 方法？

javascript - 在 Vue&Vuex 中，如何在子组件中激活 onclick 方法？

问题描述

我正在尝试编辑已经存在但由 Vue.js 组成的 JS 库。所以我研究了一下Vue。问题是我制作了名为“分析”的子组件并想要锚定函数。我制作了标记并将'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>

标签： javascriptvue.js

解决方案

欢迎来到 StackExchange！

Vue 的点击事件的正确绑定是v-on:click, 或@click简写。所以当你写的时候@onclick，Vue 永远不会调用它。

只需更改@onclick为@click，一切都应该正常。

推荐阅读