Vue Js将2个值绑定到标签href上。

Question

我是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"}]

我想要构建类似于位置/分类标志符/全部 的URL结构，比如：

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

如何实现？

- Saravanan Sampathkumar

---

您在 v-bind:href 中提供的值应为有效的 JavaScript 表达式，请尝试使用 v-bind:href='"location/"+category.slug+"/all"'。 - Mat J

Answer 1

经过长时间的努力，我找到了处理这种情况的方法。我只需要创建一个生成URL的方法。

JS

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>

- Saravanan Sampathkumar