As a Vue.js beginner, I am encountering an issue where I need to update two values simultaneously during rendering.
<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>
This is my JavaScript file:
new Vue({
el : '#example',
data : {
location: 'new-york',
categories: [],
},
mounted() {
axios.get('parent-categories').then((response) => {
this.categories = response.data;
});
},
});
And here is the Ajax Response:
[{"name":"Default Category","slug":"default-category"},{"name":"Main Category","slug":"main-category"}]
I want to create a URL structure like location/category-slug/all, such as
Any suggestions on how to achieve this?