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

Question

我正在学习 Vue.JS 从几天开始，我只是在尝试做一个应用程序，点击按钮即可添加芯片。创建的芯片应获取输入的值作为名称。 我已经创建了一个(通常(应该创建此芯片的方法。它甚至没有调用该方法，我不知道为什么，我试图安慰.log方法开头的一些东西来检查它......

谢谢大家 ！

我的应用程序 ：

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

我的添加芯片文件 ：

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