How to Toggle Visibility of VueJs Component?

Question

In my Laravel App, I have a button on Blade template to show/hide a Vue Component. I tried with the following with the help of the following code here. I get following error:

[Vue warn]: Property or method "isShow" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

@extends('layouts.app')
@section('content')
 <button v-on:click="isShow = !isShow">Toggle hide and show</button>
 <site-email  v-if="isShow"></site-email>
@endsection

Component

 <template>
    <div class="label label-info"> {{domain}}'s Email</div>
 <template>

 <script>
  export default {
    data(){
      return {
          isShow : false,
        }
    }
 }
 </script>

I will highly appreciate your help.

tony19 · Accepted Answer · 2022-07-15 22:59:00Z

2

Vue's reactive data property is Component scope.

You are now accessing isShow outside of the component, so Vue can't access the property.

My suggest: You may insert the button in <site-email> component.

 <template>
    <button v-on:click="isShow = !isShow">Toggle hide and show</button>
    <div v-show="isShow" class="label label-info"> {{domain}}'s Email</div>
 <template>

 <script>
  export default {
    data(){
      return {
          isShow : false,
        }
    }
 }
 </script>

Or, if you don't want to include the button in the component, you have to use a method to communicate between components like "Event bus", ".sync props"

edited Jul 15, 2022 at 22:59

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 18, 2019 at 2:23

cereme

2801 silver badge18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Toggle Visibility of VueJs Component?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related