Discussion :

[stomerfull]

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

[gwyohm]

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: '',
    // ...

[stomerfull]

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

[gwyohm]

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

[stomerfull]

j'ai ajouté une :key="file.name" sur la balise contenant le v-for pour que ça marche