Binding id in Vue.js

In pratica, quello che voglio ottenere, è il binding dell'attributo id di un componente usando Vue.js.

Quindi, riempiamo una lista da sever remoto (usando il formato JSON).

Per ogni link della lista impostiamo l'id, che poi reperiamo nell'evento on-click.

Per fare tutto questo utiliziamo diverse cose di Vue.js:

• v-for per iterare sul JSON e riempire la lista
• v-on:click per intercettare il click sulla voce
• v-bind:id per impostare l'id

Qui sotto l'HTML della lista:

<div id="app">
  <ul>
    <li v-for="gruppo in gruppi">
      <a v-on:click="getNota($event);" v-bind:id="gruppo.nome">{{gruppo.nome}}</a>
    </li>
  </ul>
</div>

Qui invece il Javascript:

new Vue({
    el: '#app',
    data: {
        gruppi: []
    },
    created: function () {
        this.getGruppi();
    },
    methods: {
        getGruppi: function () {
            this.$http.get('file.php')
                    .then(response => {
                        this.gruppi = response.body;
                    }, response => {
                        alert(response);
                    });
        },
        getNota: function (event) {
            var nota = event.currentTarget.id;
            console.log(nota);
        }
    }
});

Nel metodo getGruppi, richiamato in caricamento pagina, interroghiamo il file che prende i dati da db (non andremo nel dettaglio).

Poi impostiamo l'evento getNota al click, estendendo l'oggetto event del frameowrk.

Fate attenzione che l'evento getNota non viene richiamato nel created; avreste un errore in quel caso.

Verrà richiamato solo a runtime.

Enjoy!