VueJS Toggle Prop Boolean Value Vis-a-vis a Computed Property

Posted 2023-02-23

【中文标题】VueJS Toggle Prop Boolean Value Vis-a-vis a Computed Property

【英文标题】：

【发布时间】：2018-02-26 09:18:21

【问题描述】：

我有一个名为 navbar-base 的组件的以下代码：

<template>
  <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <slot name="brand"></slot>
        <button class="button navbar-burger" v-if="burger" >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>

      <div class="navbar-menu">
        <div class="navbar-start">
          <slot name="menu-left"></slot>
        </div>

        <div class="navbar-end">
          <slot name="menu-right"></slot>
        </div>
      </div>
  </nav>
</template>

<script>
export default 
  props: 
    burger: 
      type: Boolean,
      default: false
    
  ,

  computed: 
    hasBurger () 
      this.burger = true
      return this.burger
    
  

</script>

我想做的是能够打开或关闭navbar-burger，如下所示：

汉堡可见（打开）

<navbar-base class="is-info" hasBurger>

 <a href="#" class="navbar-item" slot="brand">Brand name</a>
 <a href="#" class="navbar-item" slot="menu-left">Courses</a>
 <a href="#" class="navbar-item" slot="menu-right">Videos</a>
 <a href="#" class="navbar-item" slot="menu-right">Login</a>
 <a href="#" class="navbar-item" slot="menu-right">Signup</a>

</navbar-base>

汉堡不可见（关闭）

<navbar-base class="is-info">

 <a href="#" class="navbar-item" slot="brand">Brand name</a>
 <a href="#" class="navbar-item" slot="menu-left">Courses</a>
 <a href="#" class="navbar-item" slot="menu-right">Videos</a>
 <a href="#" class="navbar-item" slot="menu-right">Login</a>
 <a href="#" class="navbar-item" slot="menu-right">Signup</a>

</navbar-base>

换句话说，如果我将hasBurger 添加到<navbar-base> 标记中，那么将包含汉堡代码。否则不会。

问题是我的代码不工作——我不知道如何让它工作。

有什么想法吗？

谢谢。

【参考方案1】：

我让它工作了。关键是实际上根本不使用计算属性。这是工作代码（以防有人发现它有帮助）：

<template>
  <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <slot name="brand"></slot>
        <button class="button navbar-burger" v-if="hasBurger" >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>

      <div class="navbar-menu">
        <div class="navbar-start">
          <slot name="menu-left"></slot>
        </div>

        <div class="navbar-end">
          <slot name="menu-right"></slot>
        </div>
      </div>
  </nav>
</template>

<script>
export default 
  props: 
    hasBurger: 
      type: Boolean,
      default: false
    
  

</script>