无法访问 VueJS 模板中的值

Question

我无法在我的模板中访问用户的电子邮件。这是我所做的：

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' }
        ]
    }
})

当我检查呈现的页面时，我可以看到列表，但链接是这样的：

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

我仍在为我的下一个项目学习 VueJS。我希望你能帮助我解决我的简单问题。

我使用的是 Vue.js v2.1.10 版本

:)

Answer 1

您必须为此使用v-bind：

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

或者简而言之，您也可以这样做：

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