Should not overwrite prop data. Copy and set to internal data attribute.
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="seasoned-button">
|
<div class="seasoned-button">
|
||||||
<button type="button" class="button" @click="emit('click')" :class="{ active: active }"><slot></slot></button>
|
<button type="button" class="button" @click="emit('click')" :class="{ active: isActive }"><slot></slot></button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -9,11 +9,20 @@
|
|||||||
export default {
|
export default {
|
||||||
name: 'seasonedButton',
|
name: 'seasonedButton',
|
||||||
props: {
|
props: {
|
||||||
active: Boolean
|
required: false,
|
||||||
|
active: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
beforeMount() {
|
||||||
|
if (this.active) {
|
||||||
|
this.isActive = this.active;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
emit() {
|
emit() {
|
||||||
this.active = !this.active;
|
|
||||||
this.$emit('click')
|
this.$emit('click')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user