@click calling a methods not workings in vue.js

Question

i'm learning Vue.JS since some days, i'm just tryna doing an app that add a chip on click on a button. The created chips should get the value on of an input as name. I have created a method that (normally), should create this chip. It's not even calling the method and i don't know why, i've tried to console.log something at the beginning of the methods to check it...

Thanks all !

My App.vue :

<template>
  <v-app id="whole_container">
    <v-content id="main_container">
      <v-row id="main_row">
        <v-col class="hellocol" id="chips">
          <customChip name="Louis"></customChip>
        </v-col>
        <v-col class="hellocol" id="chipField">
          <addChip></addChip>
        </v-col>
      </v-row>
    </v-content>
  </v-app>
</template>

<script>
import customChip from './components/chip.vue';
import addChip from './components/addChip.vue';

export default {
  name: 'App',

  components: {
    customChip,
    addChip
  },

  data: () => ({
    //
  }),
};
</script>

My AddChip file :

<template>
    <div>  
        <v-text-field id="newChip" :outlined="true" label="Entrez un nom" placeholder="Michel" v-model="currentName"></v-text-field>
        <p>Je m'appelle {{ currentName }}</p>
        <chipButton @click="addChip( currentName )"></chipButton>
    </div>
</template>

<script>
import chipButton from './button.vue';

export default {
    data: () => ({
        currentName: ""
    }),
    components: {
        chipButton,
    },
    methods: {
        addChip: function(name) {
            console.log(name);
            let actualChips = document.getElementById('chips');
            let newChip = document.createElement('customChip');
            newChip.name = name;
            actualChips.appendChild('newChip');
        }
    }
}
</script>

arieljuod · Accepted Answer · 2020-06-13 18:38:37Z

2

You want to target the click on the HTML element of the chipButton component, instead of @click= use @click.native= to listen to events on the native element and not the component element.

If you really need to listen to the click event on the component yo have to emit that event the component (like if the event listener is on a child element):

// chipComponent.vue
<template>
  <div>
    <button @click="$emit('click')">Something</button>
  </div>
</template>

But I would go with the @click.native= directive unless you need something specific.

answered Jun 13, 2020 at 18:38

arieljuod

15.9k2 gold badges27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niklesh Raut · Accepted Answer · 2020-06-13 16:59:45Z

0

Any template tag here <chipButton> has been replaced with template contents so if you write anything like <chipButton @click="addChip( currentName )"> will be replaced with its template content and rest of attribute will vanished.

This is the example to understand as I said above.

Vue.component('test',{
  template:`<div @click="childClick">Click here to check which methods is calling</div>`,
  methods:{
    childClick: function(){
      alert('childClick');
    }
  }
})
var app = new Vue({
  el:'#niklesh',
  data:{
    name:'Niklesh Raut'
  },
  methods:{
    parentClick: function(){
      alert('parentClick');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="niklesh">
  <test  @click="parentClick"></test>
</div>

Solution 1 : Either you need to put your method inside your child component.

Solution 2 : Or just wrap up with any tag like div.

Vue.component('test',{
  template:`<div @click="childClick">Click here to check which methods is calling</div>`,
  methods:{
    childClick: function(){
      alert('childClick');
    }
  }
})
var app = new Vue({
  el:'#niklesh',
  data:{
    name:'Niklesh Raut'
  },
  methods:{
    parentClick: function(){
      alert('parentClick');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="niklesh">
  <div @click="parentClick"><test></test></div>
</div>

answered Jun 13, 2020 at 16:59

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

2 Comments

arieljuod Over a year ago

Even if the component tag is replaced with the template's html of that component that doesn't mean the @click event listener is lost. That is not what causes the issue.

Niklesh Raut Over a year ago

@arieljuod: Untill you post fixed event with .native as you suggested, Vue will not take care of any event.

Collectives™ on Stack Overflow

@click calling a methods not workings in vue.js

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related