@click 调用在 vue.js 中不起作用的方法

Question

我从几天前开始学习 Vue.JS，我只是在尝试做一个在点击按钮时添加芯片的应用程序。创建的芯片应该将输入的值作为名称。 我创建了一个（通常）应该创建这个芯片的方法。它甚至没有调用方法，我不知道为什么，我试图在方法的开头 console.log 一些东西来检查它......

谢谢大家！

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

我的 AddChip 文件：

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

Answer 1

您希望将点击定位在chipButton 组件的HTML 元素上，而不是@click= 使用@click.native= 来侦听本机元素而不是组件元素上的事件。

如果你真的需要监听组件上的 click 事件，你必须在组件上发出该事件（就像事件监听器在子元素上一样）：

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

但我会使用 @click.native= 指令，除非您需要特定的东西。

Answer 2

这里的任何模板标签<chipButton> 都已替换为模板内容，因此如果您编写类似<chipButton @click="addChip( currentName )"> 的任何内容，将被其模板内容替换，其余属性将消失。

这是我上面所说的要理解的示例。

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>

解决方案 1：要么你需要将你的方法放在你的子组件中。

解决方案 2：或者只是用任何标签结束，例如 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>