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