Vue проверяет свойства в компоненте livewire

#vue.js #laravel-7 #laravel-livewire

#vue.js #laravel-7 #laravel-livewire

Вопрос:

Я использую livewire в проектах Laravel 7 и laravel-ui.

Я создал компонент с livewire следующим образом:

  <livewire:task-steps :steps="$taskCategory->steps" />
  

Это единственный компонент на странице, и я получаю эту ошибку от vue:

введите описание изображения здесь

Я не знаю, почему vue проверяет свойство этого компонента. Я попытался установить livewire / vue, но ничего не работает.

Это мой app.js https://gist.github.com/LTroya/710bfbd95988003b441d533ccbe6106d

Я не знаю, что еще делать. Я буду признателен за любой намек

Ответ №1:

Vue и livewire конкурируют за то, кому принадлежит html.

Вы можете указать vue игнорировать блок с помощью v-pre: https://v3.vuejs.org/api/directives.html#v-pre

Или вы можете указать livewire игнорировать блок с помощью wire:ignore, на следующей странице будут показаны примеры его использования: https://laravel-livewire.com/docs/2.x/alpine-js#creating-a-datepicker

В вашем случае оберните код в div и используйте для него v-pre.

 <div v-pre>
...
</div>