태그 href에 2개의 값을 바인딩하는 Vue Js

태그 href에 2개의 값을 바인딩하는 Vue Js

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

어떻게 하면 좋을까요?

오랜 고군분투 끝에 이 상황에 대처하는 방법을 알게 되었다.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>

언급URL : https://stackoverflow.com/questions/41589635/vue-js-binding-2-values-to-a-tag-href