Question

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

SELECT

我的javascript文件

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

new Vue({
    el : '#example',

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

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

这里我想构建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

1 个答案: