Laravel Jetstream - 惯性 - 按钮组件不响应点击事件答案

【问题标题】：Laravel Jetstream - Inertia - Button Component does not respond to click eventsLaravel Jetstream - 惯性 - 按钮组件不响应点击事件
【发布时间】：2021-05-07 09:59:25
【问题描述】：

    <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>

这是我在 jetstream 模板中使用的按钮组件。但是当我单击按钮时，变量“creatingProductCategory”的值不会改变。我在这里遗漏了一些重要的东西！此外，如果您有一些好的文档的链接，那将有很大的帮助:)

【问题讨论】：

你用的是什么版本的 Vue？
当前 Vue JS 版本 - vue@2.6.12
您必须将.native 修饰符添加到@click 侦听器，即@click.native stackoverflow.com/questions/41475447/…

标签： laravel components jetstream inertiajs

【解决方案1】：

正如评论中提到的Rwd，您需要将 .native 添加到@click：

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

【讨论】：

【解决方案2】：

我有一个简单的方法。

 <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>

我使用了通用的 html5 按钮，并给了它在 jetstream 按钮中使用的类。它看起来完全一样，点击处理程序现在可以工作了

【讨论】：