Laravel＆Alpine.js | 基於PHP條件編寫Alpine.js程式碼的DOM元素

Question

<p>這個 updateSoftwareRequest 在錯誤時回傳這些資料：</p> <pre class="brush:php;toolbar:false;">    public function after(): array    {        return [            function (Validator $validator) {                if($validator->failed()) {                    $validator->errors()->add('model', $this->route('software'));                    session(['showUpdateSoftwareModal', true]);                }            }        ];    } </pre> <p>我希望這個 span 根據會話值取得一個 x-init。我正在嘗試這樣實作：</p> <pre class="brush:html;toolbar:false;">    <span x-data="{}" x-on:click="$dispatch('open-modal', 'edit-software-modal ')" data-type="edit" {{ session('showUpdateSoftwareModal') === true ? 'x-init="console.log('HI')"' : '' }}>Edit</span> ; </pre> <p>但當值為 true 時，x-init 不會觸發寫入。有人可以幫忙嗎？ <br /><br />編輯：剛剛在文件中找到了這個：<br /><br />您可以將x-init 添加到x-data HTML 區塊內部或外部的任何元素中。例如：<br /><br />有人知道其他解決方案嗎？我正在嘗試重新觸發一個編輯模態框，其中模態框內的字段從點擊按鈕的父 td 上的資料屬性中獲取。錯誤觸發來自一個表單請求，我正在嘗試觸發特定行的按鈕。 </p>

Answer 1

似乎引號有問題，因為它們被blade的{{ }}轉義了，所以應該改為：

{{ session('showUpdateSoftwareModal') === true ? 'x-init="console.log(\'HI\')"' : '' }}

可以用：

{!! session('showUpdateSoftwareModal') === true ? 'x-init="console.log(\'HI\')"' : '' !!}

但我建議您採用不同的方法：

<span x-data="{myFlag: {{ (int)session('showUpdateSoftwareModal', false) }} }"
      @click="$dispatch('open-modal', 'edit-software-modal')"
      data-type="edit"
      x-init="if (myFlag) {console.log('HI')}"
>
  Edit
</span>

這樣您可以在Alpine物件的任何地方使用myFlag。