Comment obtenir les valeurs des données* les attributs dans vuejs

J'ai un bouton qui, lorsque l'utilisateur clique dessus ouvre un modal, et le contenu à afficher dans le modal est basée sur les attributs data-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 quand on clique dessus je devrais appeler un vuejs fonction avec un paramètre, qui est l'attribut data -.

Mon modal bouton,

<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 que ce paramètre est le data-id qui je obtenir à partir du bouton ci-dessus.

Code Modale

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

Pouvez-vous poster le code de la modale vous utilisez?
Affiché le code pour modal, j'ai besoin de passer un paramètre à la fonction modal bouton pied de page.
Lorsque vous transmettez des accessoires comme kebab cas pour le composant, Vue js changements à dos de chameau cas, data-id est disponible en this.dataId dans votre composante

OriginalL'auteur Mann | 2017-02-16

4

Je recommande de faire un console.log(this) l'intérieur d'un composant de la fonction, puis l'appel de cette fonction sur un clic sur un bouton de sorte que vous pouvez inspecter toutes les propriétés du composant.

(Voir l'image jointe, ci-dessous, par exemple de sortie de la ci-dessus console.log déclaration.)

Cela vous montre que, parmi d'autres, vous avez accès à la $el de détention de propriété de l'élément du DOM. Ce qui ouvre beaucoup de possibilités, comme la possibilité d'ajouter le code suivant à la mounted cycle de vie du crochet de votre composant:
```
mounted() {
  console.log(this);
  this.myAttribute = this.$el.getAttribute('data-attribute-name');
},
```
Et pour cet exemple, cette.myAttribute aurait été défini dans (par exemple) de vos données de propriété:
```
//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) du Cycle de vie des crochets de la documentation

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

Il est possible d'utiliser this.$el.getAttribute('data-*') fonction dans beforeMount crochet. Dans ce cas, vous pouvez spécifier null pour les propriétés à la place des valeurs par défaut dans data fonction.
Pour tout 1.utilisateurs de x, compiled ressemble le plus précoce du cycle de vie de crochet avec this.$el peuplé de telle sorte que vous pouvez l'utiliser comme ça.

OriginalL'auteur LittleTiger
0

Une simple option sera de lier l'id du bouton supprimer ainsi
```
  <button type="button" class="btn btn-danger"
        @click.prevent="deleteItem(this)"  :data-id=item.id data-dismiss="modal">
        Delete
    </button>
```
Lorsque vous ajoutez à cela, j'obtiens l'erreur suivante [Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)
assurez-vous que le champ d'application s'étend le bouton ainsi
Oui, le bouton est dans le champ d'application elle-même.
pouvez-vous créer un jsfiddle?

OriginalL'auteur madalinivascu
0

Notez également que vous obtenez de passer l'id comme ceci:
```
<button type="button" @click="deleteItem(item.id)">Delete</button>
```
OriginalL'auteur Andrey Prokhorov

Vous devez vous connecter pour publier un commentaire.