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。