faire apparaitre un texte ou non en fonction de mon choix de checkbox

Par DevSoftCy, il y a 2 ans

PHP Laravel
Javascript VueJS

Bonjour à tous, j'utilise dans ma vue parente un component Checkbox que j'ai créée sous inertiajs. on a donc deux checkbox une pour yes et une pour no. si on a cliqué sur yes (et enregistré dans mon formulaire) on voit un texte apparaitre. Par contre si après on veut cliquer sur no le texte ne devrait plus apparaitre mais sans cliquer sur save il reste toujours visible mon fameux texte. Quelqu'un de calé en inertiajs pourrait me donner un peu d'aide svp ??

Voici mon code de ma checkbox:

<template> <div class="tw-flex tw-items-center tw-gap-4"> <label> <slot> <span v-if="textBefore" class="tw-text-md tw-font-medium" :class="[!value && 'tw-text-slate-300']" > {{ textBefore }} </span> </slot> <input type="checkbox" v-model="yesChecked" :id="checkboxId" :name="checkboxName" :checked="yesChecked" @change="updateSelection('yes', yesChecked)" :value="yesChecked ? true : false" class="tw-h-6 tw-w-6 tw-cursor-pointer tw-rounded-lg tw-border-2 tw-border-gray-300 tw-transition-colors tw-duration-200 tw-ease-in-out focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-indigo-600 focus:tw-ring-offset-2" /> <span class="tw-text-md tw-font-medium" :class="[!yesChecked && 'tw-text-slate-300']" > Yes </span> </label> <label> <input type="checkbox" v-model="noChecked" @change="updateSelection('no', noChecked)" :value="noChecked ? true : false" class="tw-h-6 tw-w-6 tw-cursor-pointer tw-rounded-lg tw-border-2 tw-border-gray-300 tw-transition-colors tw-duration-200 tw-ease-in-out focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-indigo-600 focus:tw-ring-offset-2" /> <span class="tw-text-md tw-font-medium" :class="[!noChecked && 'tw-text-slate-300']" > No </span> </label> </div> </template> <script setup> import { ref, watchEffect } from 'vue'; const props = defineProps({ modelValue: { type: Boolean }, textBefore: String, checkboxId: String, checkboxName: String, initialValue: { type: Boolean }, }); const yesChecked = ref(props.initialValue); const noChecked = ref(!props.initialValue); const emit = defineEmits(['update:modelValue', 'selectionChanged']); const updateSelection = (option, checked) => { if (option === 'yes' && checked) { noChecked.value = false; } else if (option === 'no' && checked) { yesChecked.value = false; } emit('update:modelValue', yesChecked.value); emit('selectionChanged', yesChecked.value); }; watchEffect(() => { yesChecked.value = props.initialValue; noChecked.value = !props.initialValue; }); // output the selected value when it changes emit('update:modelValue', yesChecked.value); </script>

et voici le bout de code où j'utilise ma checkbox:

<td class="tw-break-all tw-px-6 tw-py-4"> <CheckBox class="regime" :checkboxId="'regime' + item.item.id" :checkboxName="'regime' + item.item.id" :update:modelValue=" containsSession(item.item.id, session) " @selection-changed=" changeSession(item.item.id, $event) " :session="session" :initialValue="containsSessionRegime(item.item.id, session)" @changeCheckbox="changeCheckBox(item.item.id)" /> </td>

Ce que je veux

je veux que si on clique sur yes le texte apparait, si on clique sur non le texte disparait

Ce que j'obtiens

quand je clique sur non le texte apparait toujours. Je ne sais pas comment m'y prendre. Et au passage si vous auriez d'excellentes sources de formations avec inertiajs laravel et vue ?? Parce que je me sens un peu larguée avec ces technologies, javascript n'étant pas ma spécialité à la base.

6 réponses

DevSoftCy, il y a 2 ans

je vais devoir chercher pour travailler autrement car ça ne fonctionne pas. Vous auriez une autre idée éventuellement ? Merci beaucoup.

popotte, il y a 2 ans

Hello :)

Alors pour faire plus simple tu ne devrait pas utiliser inertia pour cet effet de texte

Utilises les peer Tailwind, bien plus simple

En gros à ton texte tu ajoutes la class hidden, dans ton checkbok yes tu ajoutes la fonction peer/text-yes, et dans ton texte du ajoute encore une autre class qui est peer-checked/text-yes:flex

De la lecture :) https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-peers

DevSoftCy, il y a 2 ans

hummm je vais tester cela demain car en gros j'ai cela :

<td> <CheckBox <td v-if="ifYesChecked">mon texte à montrer</td>class="regime" :checkboxId="'regime' + item.item.id" :checkboxName="'regime' + item.item.id" :update:modelValue=" containsSession(item.item.id, session) " @selection-changed=" changeSession(item.item.id, $event) " :session="session" :initialValue="containsSessionRegime(item.item.id, session)" @changeCheckbox="changeCheckBox(item.item.id)" /> </td> <td v-if="ifYesChecked">mon texte à montrer</td>

je voulais tester de cette manière. Merci pour l'information, je testerai demain et donnerai des retours : )
Et merci pour ma petite lecture du soir.

Bonne soirée :)

DevSoftCy, il y a 2 ans

Bonjour, je viens de tester, quand on l'utilise directement dans la vue ça fonctionne nickel, par contre vu que moi je pars d'un composant dans une vue parente, là ça ne fonctionne plus. Je ne sais pas si il y aurait un moyen de contourner cela. Merci pour votre aide.

popotte, il y a 2 ans

Ah oui alors c'est le soucis de tailwind: pas de class dynamique ^^'

En gros la class est purgée car elle apparait de façon dynamique avec les components

Pour régler le soucis faut ajouter les class peer dans la safelist pour dire à tailwind qu'il ne faut pas purger cette class:

export default { /* ta config ... */ safeList: [ 'peer/test-yes', ] }

Puis un coup de npm run build ou npm run dev et c'est bon :)

popotte, il y a 2 ans

Mmmh alors deux solutions:

  • Soit tu mets tous les éléments qui doivent interagir dans le même component

  • Soit dans pour tes click tu fait à l'ancienne (document.getElementById()) l'ancienne syntaxe en a rien a faire qu'il y ait des components, il scope sur le dom et basta (par contre faut initialiser à partir du moment où le dom est dispo)