Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre régulier Avatar de stomerfull
    Inscrit en
    septembre 2005
    Messages
    305
    Détails du profil
    Informations forums :
    Inscription : septembre 2005
    Messages : 305
    Points : 119
    Points
    119
    Par défaut Vuejs Draggable : Comportement bizarre pour les input
    Bonjour ,
    j'utilise ce plugins https://github.com/SortableJS/Vue.Draggable/ pour reorganiser l'ordre d'une liste .
    Mais quand j'ajoute une input type radio , je coche une ligne et je la deplace en haut
    Le bouton radio revient sur sa dernière position coché

    On peut voir ici le probleme :https://jsfiddle.net/amherve/nm6c25eg/5/

    Merci pour votre aide

  2. #2
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Ingénieur avant-vente
    Inscrit en
    octobre 2007
    Messages
    825
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur avant-vente

    Informations forums :
    Inscription : octobre 2007
    Messages : 825
    Points : 1 160
    Points
    1 160
    Par défaut
    Salut,

    ton problème vient du fait que l'attribut value de tes inputs est renseigné par l'index de ton v-for du coup les différentes valeurs possibles de ta liste changent d'id en fonction de l'ordonnancement que tu fais :
    Au début tu as John(0), Joao(1), John(2), tu coches John (index =2), tu le drag en premier, il devient 0, mais la valeur choisie est 2...

    Pour corriger ton probleme, tu définis par exemple dans tes data un selected, puis tu l'utilises en v-model.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div v-for="(element,index) in list">{{element.name}}
          <button @click="remove(index)">X
          </button>
          <input type="radio" v-model="selected" name="drone" :value="element.name">
          </div>
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    var vm = new Vue({
      el: "#main",
      data: {
        selected: '',
        // ...
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  3. #3
    Membre régulier Avatar de stomerfull
    Inscrit en
    septembre 2005
    Messages
    305
    Détails du profil
    Informations forums :
    Inscription : septembre 2005
    Messages : 305
    Points : 119
    Points
    119
    Par défaut
    Merci pour votre réponse ça a résolu le problème, par contre dans cette même liste je voudrai ajouter la photo preview de ces utilisateurs qui est générer dynamiquement.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div v-for="(element,index) in list">{{element.name}}
          <button @click="remove(index)">X
          </button>
          <input type="radio" v-model="selected" name="drone" :value="element.name">
          <img class="q-item-image item_drag"  v-model="element.name"  v-bind:ref="'image'+parseInt( index )"/>
          </div>

    dans la méthode de ma vue j'ai ça

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    methods : {
          handleFilesUpload(){
             let uploadedFiles = this.$refs.files.files;
     
             //Adds the uploaded file to the files array
             for( var i = 0; i < uploadedFiles.length; i++ ){
                  this.files.push( uploadedFiles[i] );
             }
     
             //Generate image previews for the uploaded files
             this.getImagePreviews();
          },
          //Gets the preview image for the file.
          getImagePreviews(){
     
            //Iterate over all of the files and generate an image preview for each one.
            for( let i = 0; i < this.files.length; i++ ){
     
              //Ensure the file is an image file
              if ( /\.(jpe?g|png|gif)$/i.test( this.files[i].name ) ) {
     
                //Create a new FileReader object
                let reader = new FileReader();
     
                /*
                  Add an event listener for when the file has been loaded
                  to update the src on the file preview.
                */
                reader.addEventListener("load", function(){
                  this.$refs['image'+parseInt( i )][0].src = reader.result;
                }.bind(this), false);
     
                /*
                  Read the data for the file in through the reader. When it has
                  been loaded, we listen to the event propagated and set the image
                  src to what was loaded from the reader.
                */
                reader.readAsDataURL( this.files[i] );
              }
            }
          },

    c'est la méthode getImagePreviews() qui génère la photo preview des utilisateurs si je met un v-model = element.name dans img, le drag ignore la photo , le nom de la photo et le radio bouton est bien draggué.

  4. #4
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Ingénieur avant-vente
    Inscrit en
    octobre 2007
    Messages
    825
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur avant-vente

    Informations forums :
    Inscription : octobre 2007
    Messages : 825
    Points : 1 160
    Points
    1 160
    Par défaut
    c'est le même problème...
    ta photo est référencée avec l'index. Quand tu ordonnes tes éléments, leur index change, donc leur image aussi
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  5. #5
    Membre régulier Avatar de stomerfull
    Inscrit en
    septembre 2005
    Messages
    305
    Détails du profil
    Informations forums :
    Inscription : septembre 2005
    Messages : 305
    Points : 119
    Points
    119
    Par défaut
    j'ai ajouté une :key="file.name" sur la balise contenant le v-for pour que ça marche

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [1.x] (in)compatibilité entre ie6 et firefox pour les input type text
    Par sab_etudianteBTS dans le forum Symfony
    Réponses: 1
    Dernier message: 07/11/2008, 14h51
  2. style différents pour les inputs
    Par grinder59 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 01/10/2008, 12h09
  3. [HTML] Firefox vs IE pour les <input type="text">
    Par sebos63 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 20/06/2007, 17h22
  4. Réponses: 1
    Dernier message: 16/02/2007, 10h21
  5. [TRANSAQ SQL] INSERT comportement bizarre avec les REAL
    Par argyronet dans le forum Langage SQL
    Réponses: 2
    Dernier message: 02/12/2005, 12h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo