CODEWITHSUNDEEP
javascriptvue.js
SangBin
SangBin

Reputation: 11

In Vue&Vuex, how can I activate onclick method in child component?

I'm trying to edit JS library that already existed but it consisted of Vue. So I studied Vue a little. The problem is that I made child component called 'Analysis' and want to anchor function. I made tag and bind 'moveAnchor' method to onclick, also declared 'moveAnchor' on methods part. but it didn't work. How can I fix? I'm sorry for being inexperienced.. :(

it is script.js of analysis.

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

it is template.html of analysis.

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

Upvotes: 1

Views: 74

Answers (1)

Oliver Ni
Oliver Ni

Reputation: 2662

Welcome to StackExchange!

The correct binding for Vue's click event is v-on:click, or @click for shorthand. So when you write @onclick, Vue will never call that.

Just change @onclick to @click and all should work fine.

Upvotes: 1

Related Questions