laravel - Avoid mutating a prop directly for @click

Question

I'm trying to import and use the JetButton component from laravel jetstream. I've added the @click emit event to the jetbutton but getting the error:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

Component

<template>
    <jet-button @click="update()">
        Update
    </jet-button>
</template>
<script>
   method:{
       update(){ //doing something }
   }
 </script>

JetButton

<template>
    <button @click="$emit('click', $event);" :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150">
        <slot></slot>
    </button>
</template>

question from:https://stackoverflow.com/questions/65921886/avoid-mutating-a-prop-directly-for-click

Answer 1

When emitting an event you need to define the method first which will be called and then emit that event from the method.

The error tells that, don't emit event directly in the prop.

On @click call a method defined in the JetButton component and then use this.$emit('call').

Component

<template>
    <jet-button @call="update">
        Update
    </jet-button>
</template>
<script>
   methods () {
       update(){ //doing something }
   }
 </script>

JetButton

<template>
    <button @click="call" :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150">
        <slot></slot>
    </button>
</template>

<script>
methods () {
call () {
this.$emit('call')
}
}
</script>

Handle the event call in the component as <jet-button @call="update"> and then define that method in the methods() section.