我正在創建一個刀片組件，我想切換工具提示以僅在左側邊欄關閉時顯示在圖示上。
它看起來像這樣
// 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 !!}'
任何有關如何解決此問題的見解，或者可能是實作同一目標的更好方法，都非常受歡迎。如果選單被展開，只是試圖使工具提示不顯示在圖示上。
uj5u.com熱心網友回復：
對于此任務，您希望使用基于某些條件回傳一些資料的getter，您還可以訪問x-data屬性中定義的資料。在x-menu-item子組件，我們可以同時訪問leftSidebarOpen和tooltip資料，所以我們可以定義一個getTooltip吸氣，支票的價值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.
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/402146.html