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

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>

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

标签： laravelcomponentsjetstreaminertiajs

Answer 1

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

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