Zugriff auf Werte in VueJS-Vorlage nicht möglich

Question

Ich kann nicht auf die E-Mail-Adresse des Benutzers in meiner Vorlage zugreifen. Hier ist, was ich getan habe:

Vue.component('officemates', { 
    props: ['officemate'], 
    template: '<li>{{ officemate.name }} | <a href="{{ officemate.website }}">{{ officemate.website }}</a></li>' 
}); 

var officemates = new Vue({ 
    el: '#my-officemates', 
    data: { 
     myOfficeMates: [ 
      { name: 'Jolo Pedrocillo', website: 'https://www.oneman.com/' }, 
      { name: 'Lucel Del Campo', website: 'https://www.single-mom.com/' }, 
      { name: 'PJ Manahon', website: 'https://www.thebigone.com' }, 
      { name: 'Evan Ortega', website: 'https://www.goodguy.com' } 
     ] 
    } 
}) 

Wenn ich die gerenderte Seite überprüfen kann ich die Liste sieht aber die Verbindung ist wie folgt:

http://localhost/dev_beta/vue/{{ officemate.website }} 

ich noch studierte VueJS für mein nächstes Projekt. Ich hoffe du kannst mir mit meinem einfachen Problem helfen.

Ich bin mit Version Vue.js V2.1.10

:)

Answer 1

Sie haben v-bind für diesen Einsatz:

<a v-bind:href="officemate.website">{{ officemate.website }}</a> 

oder kurz gesagt können Sie auch tun:

<a :href="officemate.website">{{ officemate.website }}</a>