【问题标题】:Unable to access values in VueJS template无法访问 VueJS 模板中的值
【发布时间】:2017-06-23 01:47:09
【问题描述】:

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

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

:)

【问题讨论】:

    标签: vue.js


    【解决方案1】:

    您必须为此使用v-bind

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

    或者简而言之,您也可以这样做:

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

    【讨论】:

    • 好的,现在它正在工作。你能解释一下为什么在:href="myurl" 中不需要{{ }} 吗?
    • @Jerielle 使用 v-bind 您可以将一个或多个属性动态绑定到 vue 数据变量。看到类似的答案here
    猜你喜欢
    • 2020-07-11
    • 2019-05-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-02-25
    • 1970-01-01
    相关资源
    最近更新 更多