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 结构，如 location/category-slug/all 即，

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

如何实现？

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>

Vue Js 绑定 2 个值到标签 href

Vue Js binding 2 values to a tag href

javascript

laravel

vue.js

vuejs2