web-dev-qa-db-fra.com

Comment obtenir les valeurs des attributs de données dans une vue

J'ai un bouton qui, lorsqu'on clique dessus, ouvre une modale, et le contenu à afficher dans la modale est basé sur les attributs de données transmis au bouton.

Mon bouton,

<button class="btn btn-info" data-toggle="modal"
        data-target="#someModal" :data-id=item.id :data-name=item.name>
        Edit
    </button>

Dans mon modal, j'ai quelques boutons et lorsque je clique dessus, je devrais appeler une fonction vuejs avec un paramètre, qui est l'attribut data.

Mon bouton modal,

<div class="modal-footer">
    <button type="button" class="btn btn-danger"
        @click.prevent="deleteItem()" data-dismiss="modal">
        Delete
    </button>
    <button type="button" class="btn btn-warning" data-dismiss="modal">
        <span class='glyphicon glyphicon-remove'></span> Close
    </button>
</div>

Ici, je dois passer un paramètre à deleteItem(), et ce paramètre est le data-id que je reçois à partir du bouton ci-dessus.

Code pour modal

    <div id="deleteModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Delete</h4>
                </div>
                <div class="modal-body">
                    <div class="deleteContent">
                        Are you Sure you want to delete ?
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn actionBtn btn-danger"
                            @click.prevent="deleteItem()"
                            data-dismiss="modal">
                            Delete <span id="footer_action_button"
                                class='glyphicon glyphicon-trash'> </span>
                        </button>
                        <button type="button" class="btn btn-warning"
                            data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
javascriptjqueryvue.jsvuejs2
6
Mann

Je recommande d'effectuer une console.log(this) dans une fonction de composant, puis d'appeler cette fonction par un clic de bouton afin que vous puissiez inspecter toutes les propriétés du composant.

(Voir l'image ci-jointe, ci-dessous, pour obtenir un exemple de l'instruction console.log ci-dessus.)

Cela vous montre que parmi d'autres, vous avez accès à la propriété $el contenant l'élément DOM. Ce qui ouvre de nombreuses possibilités, telles que la possibilité d'ajouter le code suivant au hook mounted lifecycle de votre composant: 

mounted() {
  console.log(this);
  this.myAttribute = this.$el.getAttribute('data-attribute-name');
},

Et pour cet exemple, this.myAttribute aurait été défini dans (par exemple) votre propriété de données:

// This value gets attributed during an earlier lifecycle hook.
// It will be overridden in the component's mounted() lifecycle hook.
data() {
  return {
    myAttribute: 'defaultvalue'
  }
}

Vue.js (v2) Lifecycle hooks documentation

Exemple de sortie lors de l'exécution de console.log(this) à l'intérieur d'un composant:

 enter image description here

4
LittleTiger

Notez également que vous obtenez également l'identifiant suivant:

<button type="button" @click="deleteItem(item.id)">Delete</button>
0
Andrey Prokhorov

Une simple option sera de lier l'identifiant au bouton de suppression 

  <button type="button" class="btn btn-danger"
        @click.prevent="deleteItem(this)"  :data-id=item.id data-dismiss="modal">
        Delete
    </button>
0
madalinivascu