Vue Js将2个值绑定到标签href答案

【问题标题】：Vue Js binding 2 values to a tag hrefVue Js将2个值绑定到标签href
【发布时间】：2017-01-11 11:24:40
【问题描述】：

我是 Vue js 的初学者。我遇到了一个问题，我必须在渲染时更新两个值。

<ul class="category-list">
    <li v-for="category in categories">
        <a v-bind:href="location/category.slug/all" v-text="category.name"></a>
    </li>
</ul>

我的 javascript 文件

new Vue({
    el : '#example',

    data : {
        location:   'new-york',
        categories: [],
    },

    mounted() {
        axios.get('parent-categories').then((response) => {
            this.categories = response.data;
        });
    },
});

Ajax 响应

[{"name":"Default Category","slug":"default-category"},{"name":"Main Category","slug":"main-category"}]

这里我想构建像 location/category-slug/all 这样的 url 结构，即，

http://myapp.com/new-york/default-category/all

如何做到这一点？

【问题讨论】：

您在v-bind:href 中提供的值应该是有效的javascript 表达式，试试v-bind:href='"location/"+category.slug+"/all"'。

标签： javascript laravel vuejs2 vue.js

【解决方案1】：

经过长期的斗争，找到了如何处理这种情况。我所要做的就是创建一个为我生成 URL 的方法。

new Vue({
    el : '#example',

    data : {
        location:   'new-york',
        categories: [],
    },
    methods: {
       slug: function (category) {
            return this.location+'/'+category.slug+'/all';
        }

    },
    mounted() {
        axios.get('parent-categories').then((response) => {
            this.categories = response.data;
        });
    },
});

HTML

<div id="example">
     <h3>Services</h3>
     <ul class="category-list">
         <li v-for="category in categories">
             <a :href="slug(category)" v-text="category.name"></a>
         </li>
     </ul>
</div>

【讨论】：