Laravel & Alpine.js | Éléments DOM pour écrire du code Alpine.js basé sur des conditions PHP

Question

<p>Cette mise à jourSoftwareRequest renvoie ces données en cas d'erreur : </p> <pre class="brush:php;toolbar:false;"> fonction publique après() : tableau { retour [ fonction (Validateur $validateur) { Si ($ valeur-& gt; a échoué ()) {) {                            $validator->errors()->add('model', $this->route('software')); session(['showUpdateSoftwareModal', true]);             }                                    ]; } ≪/pré> <p>Je souhaite que cette période obtienne un x-init basé sur la valeur de la session. J'essaie de le faire comme ceci : </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> ; ≪/pré> <p>Mais lorsque la valeur est vraie, x-init ne déclenchera pas l'écriture. Quelqu'un peut-il m'aider ? <br /><br />Edit : Je viens de trouver ceci dans la documentation : <br /><br />Vous pouvez ajouter x-init à l'intérieur ou à l'extérieur du bloc HTML x-data dans n'importe quel élément. Par exemple :<br /><br />Quelqu'un connaît-il d'autres solutions ? J'essaie de redéclencher un modal d'édition où les champs du modal sont extraits des propriétés de données sur le td parent du bouton au clic. L'erreur se déclenche à partir d'une demande de formulaire et j'essaie de déclencher un bouton pour une ligne spécifique. </p>

Answer 1

Il semble qu'il y ait un problème avec les guillemets car ils sont échappés par le {{ }} de la lame, ils devraient donc être remplacés par :

{{ session('showUpdateSoftwareModal') === true ? 'x-init="console.log(\'HI\')"' : '' }}

Peut être utilisé :

{!! session('showUpdateSoftwareModal') === true ? 'x-init="console.log(\'HI\')"' : '' !!}

Mais je vous suggère d'adopter une approche différente :

<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>

De cette façon, vous pouvez utiliser myFlag n'importe où dans l'objet Alpine.