I'm looking to display dynamic titles based on the number of times a value is added. For example, if a user selects cats and clicks Add, I want the title to show as cats 1. If the user adds it again, then it should be displayed as cats 2, and so on for dogs. I'm currently struggling to solve this issue.
You can find the solution in action on this codepen.
This is the Vue.js code that works:
new Vue({
el: "#app",
data() {
return {
selected: [],
animalList: [],
moreAnimals: [{
title: "cat",
value: "cat"
},
{
title: "Dog",
value: "dog"
}
]
};
},
methods: {
createTitle() {
this.animalList = this.animalList.concat(this.selected);
console.log(this.animalList);
this.selected = [];
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06707363726f607f46372833283732">[email protected]</a>/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22545747564b445b62130c170c1316">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout row wrap>
<v-flex xs2 v-for="(animal,index) in animalList" :key="`${animal.value} - ${index}`">
{{animal.value}}
</v-flex>
</v-layout>
<v-flex v-for="(more,index) in moreAnimals" :key="`${more.value} - ${index}`">
<v-checkbox :value="more" v-model="selected" :label="more.title">
</v-checkbox>
</v-flex>
<v-btn @click="createTitle">Add</v-btn>
</v-container>
</v-app>
</div>Your assistance is greatly appreciated. Thank you!