根据 alpine js 中的另一个条件切换 x-data

Question

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

看起来像这样

// 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 returns 一些基于某些条件的数据，您还可以访问 x-data 属性中定义的数据。在 x-menu-item 子组件中，我们可以访问 leftSidebarOpen 和 tooltip 数据，因此我们可以定义一个 getTooltip getter，它检查 [=13] 的值=] 和 returns 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 中定义的数据。

根据 alpine js 中的另一个条件切换 x-data

Toggling x-data based on another conditional in alpine js

laravel

laravel-blade

alpine.js