I would like to know whether it's possible to simplify this problem?
I have a bunch of button components named Btn like this:
<Btn content="7" @click="addSymbol(content)" />
<Btn content="8" @click="addSymbol(content)" />
<Btn content="9" @click="addSymbol(content)" />
<Btn content="/" @click="addSymbol(content)" />
I need to trigger the addSymbol method with the according content attribute and possibly, if I could simplify it so that I do not have to declare it on every single component?
You can group the contents in an array and use v-for to create the components. To get the content of each, you can emit the prop as follows:
const btn = Vue.component('btn', {
template: '#btn',
props: ['content'],
methods: {
clicked() {
this.$emit('click', this.content);
}
}
});
new Vue({
el:"#app",
components: { btn },
data: () => ({ contents: ['7','8','9','/'] }),
methods: {
addSymbol(content) {
console.log(content);
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template id="btn">
<button @click="clicked">CLICK {{content}}</button>
</template>
<div id="app">
<btn
v-for="(content, index) in contents"
:key="index"
:content="content"
@click="addSymbol"
/>
</div>This answer assumes you can't just do a v-for on the <Btn> components for some reason. If so then wrap them in a div like this and we can use event bubbling:
<div @click="addSymbol">
<Btn content="7" />
<Btn content="8" />
<Btn content="9" />
<Btn content="/" />
</div>
Then in addSymbol you would take in the element like this:
addSymbol(el) {
const content = el.currentTarget.getAttribute('content');
// Do stuff
}