Vue JS组件 – 当我第二次按下带有@click的按钮时，它不起作用。

huangapple
go评论105阅读模式
英文:

Vue JS Components - It doesn't work when I press the button with @click for the second time

问题

I am using Vue JS to create modal in Laravel
when i press the button with @click the first time it works but the next time i get an error.

Laravel Blade :

  1. <div class="col-span-12 mb-5" id="app">
  2.     <div class="text-end text-base">
  3.         <button type="button" class="text-primary hover:text-secondary" @click="showModal = true">Verify your email
  4.         </button>
  5.     </div>
  6.     <v-modal :open="showModal">
  7.         <form action="" method="post" id="form_verify_email">
  8.             @csrf
  9.             <input type="hidden" name="email" value="{{ auth()->user()->email }}">
  10.             <div class="">
  11.                 <x-user.form.buttons.primary>
  12.                     {{ __('Verify Email') }}
  13.                 </x-user.form.buttons.primary>
  14.             </div>
  15.         </form>
  16.     </v-modal>
  17.     <x-user.form.inputs name="email" placeholder="Email" type="email" :value="old('email', auth()->user()->email)"/>
  18. </div>

JS :

  1. import { createApp } from 'vue'
  2. import modal from './components/modal.vue'
  4. // Vue app
  5. const app = createApp({
  6.     data() {
  7.         return {
  8.             showModal: false,
  9.         }
  10.     },
  11. })
  13. app.component('v-modal', modal)
  15. app.mount('#app')

Vue:

  1. <script setup>
  2. import { ref, defineProps,  onMounted } from 'vue'
  3. import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
  5. let { open } = defineProps({
  6.     open: {
  7.         type: Boolean,
  8.         required: true,
  9.     },
  10. })
  11. </script>

the template I use in tailwindcss : code first

英文:

I am using Vue JS to create modal in Laravel
when i press the button with @click the first time it works but the next time i get an error.

Laravel Blade :

  1. &lt;div class=&quot;col-span-12 mb-5&quot; id=&quot;app&quot;&gt;
  2.     &lt;div class=&quot;text-end text-base&quot;&gt;
  3.         &lt;button type=&quot;button&quot; class=&quot;text-primary hover:text-secondary&quot; @click=&quot;showModal = true&quot;&gt;Verify your email
  4.         &lt;/button&gt;
  5.     &lt;/div&gt;
  6.     &lt;v-modal :open=&quot;showModal&quot;&gt;
  7.         &lt;form action=&quot;&quot; method=&quot;post&quot; id=&quot;form_verify_email&quot;&gt;
  8.             @csrf
  9.             &lt;input type=&quot;hidden&quot; name=&quot;email&quot; value=&quot;{{ auth()-&gt;user()-&gt;email }}&quot;&gt;
  10.             &lt;div class=&quot;&quot;&gt;
  11.                 &lt;x-user.form.buttons.primary&gt;
  12.                     {{ __(&#39;Verify Email&#39;) }}
  13.                 &lt;/x-user.form.buttons.primary&gt;
  14.             &lt;/div&gt;
  15.         &lt;/form&gt;
  16.     &lt;/v-modal&gt;
  17.     &lt;x-user.form.inputs name=&quot;email&quot; placeholder=&quot;Email&quot; type=&quot;email&quot; :value=&quot;old(&#39;email&#39;, auth()-&gt;user()-&gt;email)&quot;/&gt;
  18. &lt;/div&gt;

JS :

  1. import { createApp } from &#39;vue&#39;
  3. import modal from &#39;./components/modal.vue&#39;
  5. // Vue app
  6. const app = createApp({
  7.     data() {
  8.         return {
  9.             showModal: false,
  10.         }
  11.     },
  12. })
  15. app.component(&#39;v-modal&#39;, modal)
  17. app.mount(&#39;#app&#39;)

Vue:

  1. &lt;script setup&gt;
  2. import { ref, defineProps,  onMounted } from &#39;vue&#39;
  3. import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from &#39;@headlessui/vue&#39;
  5. let { open } = defineProps({
  6.     open: {
  7.         type: Boolean,
  8.         required: true,
  9.     },
  10. })
  11. &lt;/script&gt;

the template I use in tailwindcss : code first

can you see where i am going wrong ?

答案1

得分: 1

当你关闭对话框时，showModal 保持为 true，所以点击不会改变它，第二次什么都不会发生。你应该在关闭 v-modal 事件上将它设置为 false：

你的 v-modal：

  1. &lt;Dialog :open=&quot;open&quot; @close=&quot;$emit(&#39;close&#39;)&quot;&gt;

https://headlessui.com/vue/dialog

以及你的父组件：

  1. &lt;div class=&quot;col-span-12 mb-5&quot; id=&quot;app&quot;&gt;
  2.     &lt;div class=&quot;text-end text-base&quot;&gt;
  3.         &lt;button type=&quot;button&quot; class=&quot;text-primary hover:text-secondary&quot; @click=&quot;showModal = true&quot;&gt;Verify your email
  4.         &lt;/button&gt;
  5.     &lt;/div&gt;
  6.     &lt;v-modal :open=&quot;showModal&quot; @close=&quot;showModal = false&quot;&gt;
  7.         &lt;form action=&quot;&quot; method=&quot;post&quot; id=&quot;form_verify_email&quot;&gt;
  8.             @csrf
  9.             &lt;input type=&quot;hidden&quot; name=&quot;email&quot; value=&quot;{{ auth()-&gt;user()-&gt;email }}&quot;&gt;
  10.             &lt;div class=&quot;&quot;&gt;
  11.                 &lt;x-user.form.buttons.primary&gt;
  12.                     {{ __(&#39;Verify Email&#39;) }}
  13.                 &lt;/x-user.form.buttons.primary&gt;
  14.             &lt;/div&gt;
  15.         &lt;/form&gt;
  16.     &lt;/v-modal&gt;
  17.     &lt;x-user.form.inputs name=&quot;email&quot; placeholder=&quot;Email&quot; type=&quot;email&quot; :value=&quot;old(&#39;email&#39;, auth()-&gt;user()-&gt;email)&quot;/&gt;
  18. &lt;/div&gt;

注意：代码部分不要翻译，只返回翻译好的部分。

英文:

When you close the dialog, showModal stays true, so the clicking doesn't change it and nothing happens the second time. You should set it to false on the close v-modal event:

Your v-modal:

  1. &lt;Dialog :open=&quot;open&quot; @close=&quot;$emit(&#39;close&#39;)&quot;&gt;

https://headlessui.com/vue/dialog

And your parent component:

  1. &lt;div class=&quot;col-span-12 mb-5&quot; id=&quot;app&quot;&gt;
  2.     &lt;div class=&quot;text-end text-base&quot;&gt;
  3.         &lt;button type=&quot;button&quot; class=&quot;text-primary hover:text-secondary&quot; @click=&quot;showModal = true&quot;&gt;Verify your email
  4.         &lt;/button&gt;
  5.     &lt;/div&gt;
  6.     &lt;v-modal :open=&quot;showModal&quot; @close=&quot;showModal = false&quot;&gt;
  7.         &lt;form action=&quot;&quot; method=&quot;post&quot; id=&quot;form_verify_email&quot;&gt;
  8.             @csrf
  9.             &lt;input type=&quot;hidden&quot; name=&quot;email&quot; value=&quot;{{ auth()-&gt;user()-&gt;email }}&quot;&gt;
  10.             &lt;div class=&quot;&quot;&gt;
  11.                 &lt;x-user.form.buttons.primary&gt;
  12.                     {{ __(&#39;Verify Email&#39;) }}
  13.                 &lt;/x-user.form.buttons.primary&gt;
  14.             &lt;/div&gt;
  15.         &lt;/form&gt;
  16.     &lt;/v-modal&gt;
  17.     &lt;x-user.form.inputs name=&quot;email&quot; placeholder=&quot;Email&quot; type=&quot;email&quot; :value=&quot;old(&#39;email&#39;, auth()-&gt;user()-&gt;email)&quot;/&gt;
  18. &lt;/div&gt;

答案2

得分: 0

@click=&quot;showModal = !showModal&quot; 可以翻译为：@click="showModal = !showModal"。

英文:

Try this:

@click=&quot;showModal = !showModal&quot;

huangapple
  • 本文由 发表于 2023年7月13日 19:33:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76678905.html
  • javascript
  • laravel-blade
  • vue-component
  • vue.js
  • vuejs3
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定