基于 alpine js 中的另一个条件切换 x 数据

Question

我正在创建一个刀片组件，我想切换工具提示以仅在左侧边栏关闭时显示在图标上。

看起来像这样

// layouts.app
<div x-data="{leftSidebarOpen:false}">
       // some designs
       <div>
            // adding blade component
            <x-menu-item/>
       </div>

<div>   

// inside blade component
@props=(['title'=>'page title'])
<div x-data="{tooltip: '{!! $title !!}'   }" x-tooltip.placement.right="tooltip">

      //icon
</div>

我还在尝试学习 javascript，所以如何在 alpine 中编写这个函数仍然有点混乱。在文档中找到了这个，这可能对任何更精通https://alpinejs.dev/directives/data

的人都有帮助

我很想成功

If leftSidebarOpen === true for the tooltip:'' else if the leftSidebarOpen === false than tooltip='{!! $title !!}'

任何关于如何解决这个问题的见解，或者可能是实现相同目标的更好方法都非常受欢迎。只是试图在菜单展开时使工具提示不显示在图标上。

Answer 1

对于此任务，您希望使用getter，它根据某些条件返回一些数据，您还可以访问在x-data 属性中定义的数据。在x-menu-item 子组件中，我们可以访问leftSidebarOpen 和tooltip 数据，因此我们可以定义一个getTooltip getter，它检查leftSidebarOpen 的值并返回tooltip，如果它是false，并且否则为空字符串。

<div x-data="{tooltip: '{!! $title !!}',
              get getTooltip() {return leftSidebarOpen ? '' : this.tooltip}}" 
     x-tooltip.placement.right="getTooltip">
  //icon
</div>

请注意，在 getter 内部，我们必须使用 this.tooltip 来访问在 x-data 中定义的数据。