Access element list VUE JS

Question

Access element list VUE JS

Navigation

#1 by (0 votes)

1

<div id="names">
  <div class="row">
      <div v-for="i in list2" v-on:click="details('...')" data-toggle='modal' data-target='#myModal' class='col-md-4 text-center'> 
        <img src='images/st1.png' class='img-fluid'>
          <p  class=' text-center lead'>{{i.name}}</p>
      </div>

  </div>


  <p class="text-center">
    <button v-on:click="nexte" class='btnNext btn input-block-level'>Montrer plus personages</button>
  </p>

</div>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

VUE JS

var pers = 'https://swapi.co/api/people/?format=json';
new Vue({
    el: '#names',
    created: function(){
        this.getPerso();
    },
    data:{
        list2:[],
        next : ''
    },
    methods: {
        getPerso: function(){
            this.$http.get(pers).then(function(res){
                    this.list2 = res.data.results;
                    this.next = res.data.next;
            });
        },
        nexte:function(event){
            this.$http.get(this.next).then(function(res){
                this.list2 = res.data.results;
                this.next = res.data.next;

            });
        },
        details:function(cont){
            $(".modal-body > div").remove();
            $(".modal-title > p").remove();
            $(".modal-title").append("<p>Description de "+ this.list2[cont].name+"</p>");
            $(".modal-body").append("<div class='alert alert-primary'><p>Poid: "+ this.list2[cont].name+" </p></div>");
            $(".modal-body").append("<div class='alert alert-secondary'><p>Anniversaire: "+ this.list2[cont].name+"</p></div>");
            $(".modal-body").append("<div class='alert alert-success'><p>Masse: "+ this.list2[cont].name+"</p></div>");
            $(".modal-body").append("<div class='alert alert-danger'><p>Genre: "+ this.list2[cont].name+"</p></div>");
            $(".modal-body").append("<div class='alert alert-info'><p>Films Realisés "+ this.list2[cont].name+"</p></div>");
        }
    }
});

I want to pass an identifier so that when I press click, in the modal I show the character information

javascript vue.js

asked by Ernesto Emmanuel Yah Lopez 26.10.2017 в 18:24

source

1 answer

How to send Text from Listboxt by GET? Error retrieving record with a null property in Oracle

score 0 · Accepted Answer

To get the id, you can use event.currentTarget in the method:

 details(e) {
    console.log(e.currentTarget.id);
 }

Edit to show a basic example of how to get the id and the "index" of the element and pass them to a function:

new Vue({
    el: '#names',
    data:{
        list2:[
         {'name':'hola'},
         {'name':'adios'}
         ],
        next : ''
    },
    methods: {
        details(e, key){
          console.log(e.currentTarget.id)
          console.log(key)
        },
        createId(key) {
          return "id_" + key
        }
    }
});

<div id="names">
  <div class="row">
      <div v-for="(i, key) in list2" v-on:click="details(event, key)" :id="createId(key)"> 
          <p>{{ key }} - {{i.name}}</p>
      </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>