Partage
  • Partager sur Facebook
  • Partager sur Twitter

vueJS déclenchement css selon v-if

    15 février 2019 à 10:23:28

    Bonjour,

    J'ai un formulaire avec un select, j'ai utilisé vueJS pour faire que selon la selection de la valeur de ce select, des éléments de mon formulaire apparaissent ou disparaissent. A là fin de ce formulaire une div avec un texte comme ceci, elle apparait si et seulement si une valeur du select est sélectionné. Voici le texte:

    Et j'aimerais qu'en cliquant sur ce texte cela me déroule ceci:

    Ce déroulement est pour l'instant fait via du JS comme ceci:

    function anomalieAnimation()
        {
            $(document).ready(function () {
                $("#flip").click(function () {
                    $("#anomalie").toggle("slow");
                    $("#submitRow").toggle("slow");
                    $("#ret").toggle("slow");
    
                });
            });
        }


    Mais le problème c'est que c'est pas selon la selection du select...

    Donc voici ce que j'ai mis en place, un v-if mais désormais mon JS déroulante ne fonctionne plus, car il doit y avoir une incompatibilité quelque part suite au v-if et à l'id...

    <div class="row"  style="margin:5px;" v-if="selectValue === 'pp_annuel' || selectValue ==='pp_specifique' || selectValue ==='pp_cohab_of' || selectValue ==='pgc' || selectValue ==='consigne_securite' || selectValue ==='pp_bailleur'" id="flip">
                <div class="col-md-3" style="font-weight: bold;text-decoration: underline;font-size:2.2rem">
                    Anomalies <span class="fa fa-angle-right"></span>
                </div>
    
            </div>


    Si quelqu'un a une idée je suis preneur.. Merci.

    • Partager sur Facebook
    • Partager sur Twitter
      15 février 2019 à 10:58:18

      Bonjour, pour utiliser vueJS, ton Javascript ne devrait pas commencer par quelque chose comme ça normalement ? :

      var allSection = new Vue ({
       el:'#app',
       data: {
       tavariable:false,
      
       },
       methods: {
      
       buttonSelection: function() {
       this.taVariable=true;
      
       }
      
       }
      
      })

       Dans ton HTMl, @click="buttonSelection" qui va changer ta variable (taVariable) car ta méthode sera déclancher via le click. Et tu n'oublies pas de mettre v-if="tavariable". 

      Puis tu n'oublies pas de mettre l'ID correspondant dans ta div principale  HTML.

      Je te conseille de regard les 1ers videos de grafikart https://www.youtube.com/watch?v=g7YKecZhFRA&t=278s , le v-if @click sont expliqué facilement ;)

      • Partager sur Facebook
      • Partager sur Twitter
        15 février 2019 à 11:16:37

        Merci pour ta réponse.
        Alors oui pour le v-if j'ai utilisé
        var app = new Vue({
            el: '#app',
            data : {
                selectValue : '<?= $form->get("ListeType_Coordination")->getValue(); ?>'
            }
        });

        Sachant que sur mon select j'ai mis ça :

        <select class="form-control" v-model="selectValue" name="ListeType_Coordination">
                                <?php foreach ($form->get('ListeType_Coordination')->getValueOptions() as $k => $o): ?>
                                    <option value="<?= $k ?>"><?= $o ?></option>
                                <?php endforeach; ?>
         </select>
        Ce qui me permet selon la valeur du select, afficher ou non certains éléments de mon formulaire.

        Enfaite je voudrais tout bêtement faire :
        Si v-if="selectValue == 'pp_annuel' alors afficher le texte Anomalie.
        Ensuite si click sur Anomalie afficher le déroulement de la div Anomalie.
        • Partager sur Facebook
        • Partager sur Twitter
          15 février 2019 à 11:40:34

          C'est moi où tu as du php dans ton js ? :


          On m'as toujours dit : "

          Le php est exécuté côté serveur. Le javascript côté client.
          Une fois le php exécuté, le serveur te renvoi une page HTML. C'est alors que le javascript s'exécute sur ton navigateur. Or ton navigateur ne comprend pas le php, donc rien ne se passe. "

          Il faut donc que tu trouves un moyen de faire autrement :) . Peut-être que tu peux le faire, mais je ne suis pas sûr. Si t'essayer plutôt quelque chose de cette forme là ::

           <div id="demo">
                  <div v-show="active">Affichage avec le formulaire non afficher</div>
                  <div @click="ClickChangement">affichage du formulaire</div>
              </div>
          
          var demo = new Vue({
              el: '#demo',
              data: {
                  active: false
              },
              methods: {
                  ClickChangement: function(){
                      this.active = !this.active;   
                  }
              }
          });

          Tu met Dans ton HTML, ta page de départ + ton formulaire que tu veux afficher. Et le v-if s'occupera de l'afficher dans le DOM selon si la personne cliques. Et après dans ton php tu gère les cas d'erreurs ^^. Tu peut mettre par exemple un message flash dans ton php.

          • Partager sur Facebook
          • Partager sur Twitter

          vueJS déclenchement css selon v-if

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown