标签: laravel-livewire

我正在试验 Laravel Livewire，我遇到了一种情况，即使表单已成功提交，也会显示以前的错误。

在点击保存之前

点击保存后

name刀片文件中的Html 段customer-new.blade.php。

<div class="form-group">
    <div class="border rounded-0 px-1">
        <label class="mb-0" for="name">Name</label>
        <input wire:model="name" type="text" class="form-control form-control-sm " id="customer-name" aria-describedby="customer-nameHelp">
    </div>
    @error('name') <span class="err-message">{{ $message }}</span> @enderror
</div>

和保存按钮代码：

<button 
  wire:click="store" 
  wire:loading.attr="disabled" 
  wire:target="store" 
  type="submit" 
  class="btn btn-sm btn-light">Save
</button>

store CustomerNew.php 的方法：

public function store()
{
    $this->validate([
        'name' => 'required|max:80',
        'street' => 'required|max:100',
        'city' => 'required|max:40',
        'dueAmount' => 'numeric|min:0'
    ]);

    Customer::create([
        'name' => $this->name,
        'street' => $this->street,
        'city' => $this->city,
        'due_amount' => …

在我的 laravel 7 /livewire 1.3 / alpinejs 2 项目中，我从https://flatpickr.js.org datepicker 添加了 flatpickr datepicker 工作正常，但反应式不起作用。在 $current_operation_date 下面的代码中 - 组件中的 public var 被修改了，但是在 datepicker 值被选中时，alpine var operation_date 没有改变：

<div>        
    $current_operation_date::{{$current_operation_date}}<BR>
    operation_date::<div x-html="operation_date"></div>
    <!-- The line above is not modified when in datepicker value is selected -->

    <div x-data="{ operation_date: '{{$current_operation_date}}'}">
        <input
            type='text'
            id="flatpickr_operation_date"
            wire:model.lazy="current_operation_date"

            x-model="operation_date"
            x-on:blur="$dispatch('input', operation_date)"
            class="form-control editable_field"
        />
    </div>

</div>


@section('scripts')
    <script>


        $(document).ready(function(){

            var fp = flatpickr(document.querySelector('#flatpickr_operation_date'), {
                enableTime: false,
                dateFormat: 'Y-m-d',
                altFormat: "F j, Y",
                altInput: true,
                inline: …

我有一个用 laravel livewire 创建的应用程序，我正在加载一个带有多个嵌套组件的 livewire 组件，这些组件根据状态变量一次显示一个。当显示每个嵌套组件时，页面会滚动到底部。我希望默认滚动到顶部。在我尝试过的嵌套组件的顶部：

x-data x-init="window.scrollTo(0, 0)"

我还尝试在隐藏组件 1 和显示组件 2 之前使用单击事件将页面滚动到顶部。这将确保在显示组件 2 之前将页面滚动到顶部。

x-data x-on:click.document="window.scrollTo(0, 0)"

这两种方法都不起作用。提前致谢。

我正在使用 laravel livewire table 包 ([laravel livewire table][1]

[1]： https: //github.com/rappasoft/laravel-livewire-tables）在我的 laravel 应用程序（v8）上。

我还在 v3 上使用 tailwind CSS。

默认情况下，此包为表格上的暗模式添加一些顺风类。但我不想使用深色模式。无论浏览器配置如何，我希望我的网站保持轻便。

我读到我必须在 tailwind.config.js 上设置它，所以我尝试了一些类似的操作：

module.exports = {

    plugins: [require('@tailwindcss/forms')],
    darkMode: false,
};

module.exports = {

    plugins: [require('@tailwindcss/forms')],
    darkMode: 'class',
};

module.exports = {

    plugins: [require('@tailwindcss/forms')],
    darkMode: 'media',
};

没有人致力于禁用黑暗模式......

你知道该怎么做吗？

将 Trix 编辑器内容与 Livewire 连接在一起时，我遇到了问题。我认为问题在于当 Livewire 从 Trix 接收内容时，内容会被换出并且 Trix 被禁用。有没有更好的办法？

我所做的，有效的，如下。目前，页面被重定向到自身以重新启动 Trix（击败了 Livewire 的全部要点，但它也被用于其他事情）。

<div>
  <input
      id="newCommentTextTrixContent"
      type="hidden"
      wire:model="newCommentText"
  >

  <trix-editor
      id="newCommentTextTrixEditor"
      input="newCommentTextTrixContent"
  ></trix-editor>


  <button wire:click="addComment(document.getElementById('newCommentTextTrixEditor').innerHTML)">Add Comment</button>
</div>

我试过了

• 隐藏输入上的线：模型 - 没有任何反应
• x-on:trix-change="$set('comment', $event.target.innerHTML) -- 这有效，但 Trix 在第一次按键后变灰并停止工作（重启问题？）

我敢肯定像后者这样的东西更好，但是每次都以某种方式重新启动 Trix。这一切似乎有点混乱 - 所以问题是，这样做的正确方法是什么？

我正在使用 Laravel Livewire 和 Spatie 媒体库，但我在他们的文档中找不到任何有关如何执行此操作的有用信息。

我正在尝试这个，但它给了我错误

$this->menu->addMediaFromUrl($this->menu_image->temporaryUrl())->toMediaCollection('menu_image');

我收到这个错误

我收到以下错误并且有点迷失：

Livewire 在尝试对 ... 组件进行水合时遇到损坏的数据。确保 Livewire 组件的 [name, id, data] 在请求之间没有被篡改

情况如下：Livewire 2.x，Laravel 7.x，Component Controller 从 3 个 MySQL Stored Procedures 中获取数据并进行处理。组件刀片是一个非常基本的刀片，带有 foreach 循环。我正在使用 wire:init 功能，以便组件不会阻止页面加载。它包含一个定制的分页。切换到第二页数据时，出现这个错误。它在 Livewire 1.x 上没有出错。

有没有人知道如何解决这个问题？错误本身对我来说并没有多大意义。需要任何其他信息吗？

在此先感谢您，感谢您的帮助！

这可能是一个基本问题，但我很挣扎。本质上，我有一个 livewire 组件，用于更新用户输入的一系列航班信息。每当组件被重新渲染时， flatpickr 功能就会完全停止工作。我认为这是因为在该字段上初始化组件的 javascript 没有运行。确保使用适当的 javascript 重新呈现这些以启用该功能的最佳实践是什么。

这是我的刀片片段，它在初始加载时呈现良好，但每当数据发生更改时，页面都会重新呈现数组中的所有航班，但 flatpickr 功能不再起作用。

<form>
@foreach($flights as $i => $f)
<label
    x-data
    x-init="flatpickr($refs.input, {
    dateFormat: 'Y-m-d H:i',
    altInput: true,
    altFormat: 'F j, Y h:i K',
    enableTime: true,
    })">
    <div class="form-label">Arrival Time</div>
    <div class="relative">
      <input type="text"
        wire:model="flights.{{ $i }}.ArrivalTime"
        wire:key="fl{{ $i }}arrtime"
        data-input
        x-ref="input"
        placeholder="Arrival Time"
        value="{{ $f['ArrivalTime']}}"
        name="flights[{{ $i }}][ArrivalTime]"
        id="ArrivalTime{{$i}}"
      />
    </div>
</label>
@endforeach
</form>

livewire 组件基本上是这样的：

class Itinerary extends Component
{
    public $itin = null;
    public $flights = [];

    public …

我在我的应用程序中撤消 Inertia.js 时遇到问题。当我启动我的应用程序时，我不小心输入了两个命令。

php artisan jetstream:install inertia --teams

过了一会儿，我发现 Livewire 更适合我的项目。

php artisan jetstream:install livewire --teams

我试图删除我所有的 Inertia.js 组件，但我npm watch会输出错误。我想知道我应该怎么做才能从我的项目中完全撤消 Inertia.js？

我有一个文本输入字段，如果我在其中输入时自己更新它，效果会很好，但是，我需要的是让这个输入字段填充来自 javascript 的数据，而不是用户的数据。这是我的输入字段

<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="images" wire:model="images">

如果我在输入字段中输入“123”，就会发生这种情况，我得到输入字段的值：

但是，当我使用 javascript 更新它时，document.getElementById("images").value = "Hello" 输入字段将填充新数据：

但它不会进行新的 fetch 调用来获取数据，最后一个调用是在没有 javascript 的情况下插入的“123”数据......

知道如何在从 javascript 更新输入值后获取数据吗？