Laravel Jetstream - Inertia - Button Component does not respond to click events

Question

    <jet-button class="bg-green-600 m-auto"
            @click="creatingProductCategory = true"
            >Create New</jet-button>


     <jet-dialog-modal :show="creatingProductCategory" @close="creatingProductCategory = false">

                <template #title>Create New Product</template>

                <template #content>
                    <form @submit.prevent="submit">

                        <div>
                            <jet-label for="email" value="Product Category"/>
                            <select name="" id=""
                                    class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
                            >
                                <option value="1">Macrame</option>
                                <option value="2">Coords</option>
                                <option value="3">Plant</option>
                                <option value="4">Accessories</option>
                            </select>
                        </div>

                        <div class="mt-4">
                            <jet-label for="email" value="Product Name"/>
                            <jet-input id="email" type="email" class="mt-1 block w-full" v-model="form.email"
                                       placeholder="Enter Product Name"
                                       required autofocus/>
                        </div>

                        <div class="mt-4">
                            <jet-label for="password" value="Price"/>
                            <jet-input id="password" type="password" class="mt-1 block w-full"
                                       placeholder="Enter Price"
                                       v-model="form.password" required autocomplete="current-password"/>
                        </div>

                        <div class="flex items-center justify-end mt-4">

                            <jet-button class="ml-4" :class="{ 'opacity-25': form.processing }"
                                        :disabled="form.processing">
                                Create
                            </jet-button>
                        </div>
                    </form>
                </template>

            </jet-dialog-modal>

This is the button component i have used that comes within jetstream templates. But when i click the button the value of the variable 'creatingProductCategory' doesnt change. Iam missing something important here ! Also if you have links to some good documentation it would be of great help :)

You have to add the `.native` modifier to the `@click` listener i.e. `@click.native` https://stackoverflow.com/questions/41475447/vue-v-onclick-does-not-work-on-component — Rwd, Feb 03 '21 at 13:00

score 1 · Accepted Answer · answered Feb 03 '21 at 22:58

1

As Rwd mentiond in comment you need to add .native to @click:

<jet-button type="button" @click.native="someFunction" class="mr-4">
        press button
</jet-button>

answered Feb 03 '21 at 22:58

Mahdi Taleghani

36
3

score 0 · Answer 2 · answered Feb 03 '21 at 10:05

I got a simple way around it.

 <button class="bg-green-600 m-auto inline-flex items-center px-4 py-2 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"
            @click="creatingProductCategory = true"
            >Create New</button>

I used generic html5 buttons and gave it the class that was being used in jetstream buttons . It loooks exactly the same and the click handler works now

Laravel Jetstream - Inertia - Button Component does not respond to click events

2 Answers2