时间戳

首页 > 解决方案 > 如何切换 VueJs 组件的可见性？

laravel-5 - 如何切换 VueJs 组件的可见性？

问题描述

在我的 Laravel 应用程序中，我在 Blade 模板上有一个按钮来显示/隐藏 Vue 组件。我在这里借助以下代码尝试了以下操作。我收到以下错误：

[Vue 警告]：属性或方法“isShow”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅： https ://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

零件

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

标签： laravel-5vuejs2vue-component

解决方案

Vue 的响应式数据属性是Component scope.

您现在正在isShow组件外部访问，因此 Vue 无法访问该属性。

<site-email>我的建议：您可以在组件中插入按钮。

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

或者，如果您不想在组件中包含按钮，则​​必须使用一种方法在组件之间进行通信，例如“事件总线”、“. sync props ”

推荐阅读