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

如何實現這一目標？

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>