
@dani03
développeur Junior PHP plus back que front mais bon j'espère progresser en VueJs pour me definir fullstack
Livewire encountered corrupt data when trying to hydratelali
bonjour à tous j'ai un problème avec livewire. j'ai cette erreur
ce que j'essaie de faire c'est de passer un lien dans mon composant livewire pour switch de video ce qui marche bien . Mais lorsque je clique une 2eme fois j'ai l'erreur du dessus.
ici mon iframe pour voir la vidéo
1<iframe src="https://player.vimeo.com/video/{{ substr("$link", 8) }}" class=" col-md-7 m-2 rounded h-96"2 frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
ensuite mon button qui me permet de modifier le lien de la video (link
)
1<button class="btn btn-default" wire:click="$set('link','{{ $video->uri_vimeo }}')"2 :wire:key="{{ $video->id }}" id="voir_video">voir la video3</button>
si quelqu'un peut me mettre sur le chemin svp
-
bonsoir gar peut on voir ton component livewire ?
-
bonjour voici mon composant livewire video-link :
1class VideoLink extends Component2{3 public $link = "";4 public $videos;5 public function mount()6 {7 foreach ($this->videos as $video) {8 $this->link = $video->uri_vimeo;9 return;10 }11 }12 public function render()13 {15 }1617 public function updateLink($link)18 {19 $this->link = $link;20 // dd($this->link);21 }22}la vue de mon composant en dessous
1<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">2 <div class="m-4 ">34 <div> <a href="{{ url()->previous() }}"5 class="px-4 py-2 rounded-lg text-md bg-white outline-none focus:outline-none m-1 hover:m-0 focus:m-0 border border-indigo-600 hover:border-4 focus:border-4 hover:border-indigo-800 hover:text-indigo-800 focus:border-purple-200 active:border-grey-900 active:text-grey-900 transition-all">6 <i class="fas fa-arrow-left"></i> </a></div>78 </div>9 {{-- -- {{dd(substr("$link", 8), $link)}} -- --}}10 {{-- <input type="hidden" name="" id="thelink" value="{{ $link }}"> --}}1112 <div class=" flex flex-wrap m-4 justify-around">13 <iframe src="https://player.vimeo.com/video/{{ substr("$link", 8) }}" class=" col-md-7 m-2 rounded h-96"14 frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>15 <div class=" bg-indigo-200 h-90 sm:w-1/3 accordion accordion-flush m-2 border " id="accordionFlushExample">16 {{-- google maps ici --}}17 ici map google18 </div>19 </div>20 <div class="accordion accordion-flush m-6 border col-md-7 " id="accordionFlushExample">21 @foreach ($videos as $video)22 <div class="accordion" id="accordionExample">23 <div class="accordion-item">24 <h2 class="accordion-header" id="headingOne">25 <button class="accordion-button" type="button" data-bs-toggle="collapse"26 data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">27 Accordion Item #1 {{ $video->name }}28 </button>29 </h2>30 <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"31 data-bs-parent="#accordionExample">32 <div class="accordion-body">33 <strong>This is the first item's accordion body.</strong> It is shown by default, until34 the35 collapse plugin adds the appropriate classes that we use to style each element. These36 classes control the overall appearance, as well as the showing and hiding via CSS37 transitions. You can modify any of this with custom CSS or overriding our default38 variables.39 It's also worth noting that just about any HTML can go within the40 <code>.accordion-body</code>, though the transition does limit overflow.41 </div>42 <button class="items-center" wire:click="updateLink('{{ $video->uri_vimeo }}')"43 :wire:key="{{ $video->id }}" id="voir_video">voir la video44 </button>45 </div>46 </div>47 </div>4849 @endforeach5051 </div>52 </div> -
@livewire('video-link', ['videos' => $videos, 'link' => ''], key($loop->index))
-
Qu'est ce que tu veux faire en gros? Parce que ton code n'est pas comprehensible. Tu as une variable
$link
qui est une chaine de caractère mais dans la fonction mount de ton composant tu fais un foreach pour a chaque fois remplacer la valeur de$link
. Et a chaque fois ca va prendre seulement le premier lien. Donc si tu veux uniquement le premier lien de la première vidéo tu n'as pas besoin de faire un foreach.Explique mieux ce que tu veux faire parce que la définition même de ton composant n'est deja pas correcte.
-
okay. je voulais effectivement prendre seulement le premier lien raison pour laquelle je me suis lancé sur le foreach et j'ai mis un return, parce que a chaque fois il me prenait le dernier lien. je m'explique; sur la plateforme que j'essaie de concevoir j'ai un model recette et un model sections(videos) un peu comme sur udemy. maintenant lorsque je clique sur aperçu
je suis redirigé vers une page qui à lecteur viméo dont je souhaite directement lui affecté le lien de la première vidéo de la recette étant donné qu'une recette peut avoir plusieurs vidéos.
maintenant lorsque je clique sur
voir la video
(en bas a gauche dans le screen) je veux lui passer le lien de la video pour qu'il me rafraichisse la propriété de mon composant$link
1 <button class="items-center" wire:click="updateLink('{{ $video->uri_vimeo }}')"2 :wire:key="{{ $video->id }}" id="voir_video">voir la video3 </button>45// dans mon composant VideoLink6class VideoLink extends Component7{8 public $link = "";9 public $videos;10 public function mount()11 {12 foreach ($this->videos as $video) {13 $this->link = $video->uri_vimeo;14 return;15 }16 }17 public function render()18 {19 return view('livewire.video-link', ['link' => $this->link]);20 }2122 public function updateLink($link)23 {24 $this->link = $link;25 // dd($this->link);26 }27}ensuite dans la vue de mon composant il y a ma propriété $link
1<iframe src="https://player.vimeo.com/video/{{ substr("$link", 8) }}" class=" col-md-7 m-2 rounded h-96"2 frameborder="0" allow="autoplay; fullscreen" allowfullscreen>3</iframe>le problème est que lorsque que je clique sur
voir la video
une fois j'arrive bien a rafraichir le$link
de viméo pour changer de chapitre, mais lorsque j'essaie une 2eme fois disons sur un autre chapitre ou le même, j'ai donc cette erreur deLivewire encountered corrupt data when trying to hydrate
. J'ai certainement mal procédé dans mon approche. je voulais faire un peu commeCodecourse
dans le système de vidéo ouudemy
. Si tu as une meilleure approche pour que je puisse améliorer je suis preneur @mckenziearts.
Veuillez vous connecter ou créer un compte pour participer à cette conversation.