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