Javascript Vue Js将2个值绑定到标记href

我是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>

Ajax响应

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

在这里，我想构建url结构，比如位置/类别slug/all ie

---

如何做到这一点？

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

JS

Html

服务

您在

v-bind:href

中提供的值应该是有效的javascript表达式，请尝试

v-bind:href='“location/”+category.slug+“/all”

。

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

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;
        });
    },
});

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