Toggling x-data based on another conditional in alpine js-CodePudding

I am creating a blade component and I want to toggle the tooltip to only show up on the icon if the left sidebar is closed.

It looks something like this

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

I am still trying to learn javascript so how to write this function in alpine is still a bit confusing. Found this in the docs, that might be helpful for anyone that is more proficient https://alpinejs.dev/directives/data

I pretty much want to make it

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

Any insight on how to solve this, or maybe a better way to accomplish the same goal is much apprecaited. Just trying to make the tooltip not show up on the icon if the menu is expanded.

CodePudding user response：

For this task you want to use a getter that returns some data based on some conditions where you can also access data defined in x-data attributes. In the x-menu-item child component we can access both leftSidebarOpen and tooltip data, so we can define a getTooltip getter, that checks the value of leftSidebarOpen and returns tooltip if it's false, and empty string otherwise.

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

Note that inside the getter, we have to use this.tooltip to access data defined in x-data.