时间戳

首页 > 解决方案 > 在 @if 条件中使用时，Trix 编辑器不显示

laravel - 在 @if 条件中使用时，Trix 编辑器不显示

问题描述

在 larave8 livewire 我想使用 trix 编辑器在 livewire 组件上创建一个刀片视图 InfoletterCrud 如下

<div class="container ml-auto mr-auto p-10 min-h-screen">
  <div class="page-title ">{{ $page_title }}</div>
  <div class="button-line flex flex-col">
    @if ($isEditMode)
      @if ($showMode)
        @include('livewire.show-infoletter')
      @else
        @include('livewire.create-infoletter')
      @endif
    @else
      <div>
        <button wire:click="create()" class="button-cancel text-white font-bold py-2 px-4 rounded my-3">Ajouter une info-lettre</button>
      </div>
      @if (count($infoletters) > 0)
        <table class="w-full table-fixed admin-stripped-table">
          <thead>
            <tr class="w-full">
              <th class="w-1/12">Id</th>
              <th class="w-10/12">Titre</th>
              <th class="w-1/12">Actions</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($infoletters as $infoletter)
              <tr>
                <td>{{ $infoletter->id }}</td>
                <td>{{ $infoletter->title }}</td>
                <td>
                  <div style="display:flex">
                    <button
                      wire:click="show({{ $infoletter->id }})"
                      class="fontawesome-icon">
                      <span data-toggle="tooltip" title="Voir" class="fa fa-paper-plane fa-xs "></span>
                    </button>
                    <button
                      wire:click="edit({{ $infoletter->id }})"
                      class="fontawesome-icon">
                      <span data-toggle="tooltip" title="Modifier" class="fa fa-edit fa-xs "></span>
                    </button>
                    <button
                      wire:click="$emit('openModal', 'livewire-modal', {{ json_encode(['type' => 'L\'infolettre', 'ident' => $infoletter->id]) }})"
                      class="fontawesome-icon">
                      <span data-toggle="tooltip" title="Supprimer" class=" fa fa-trash fa-xs "></span>
                    </button>
                  </div>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>,
      @else
        <p>Il n'y a aucune info-lettre</p>
      @endif
    @endif
  </div>
</div>

当我将带有 @livewire('trix') 的 trix 组件放在 @if (isEditMode) 测试上方时，它会显示出来。但这不是我想要的，因为我不在编辑模式下。

如果我将它放在 livewire.create-infoletter 包含中，它不会出现。即使我将它放在 @if (isEditMode) 测试之后，它也不会出现。

有什么问题

标签： laravellaravel-livewiretrix

解决方案

您没有显示您的组件以及如何初始化 Trix，所以这只是一个猜测。我假设您正在使用 Alpinejs 执行此操作，并且在 @if 条件执行时，Alpine 已经对其 DOM 进行了更新。尝试使用 $nextTick 调用您的初始化函数 - 请参见此处：https ://alpinejs.dev/magics/nextTick 。

推荐阅读