Output dynamic values in VueJS?

Question

I am trying to render dynamic titles based on the number of times a value has been added. In the below example if a user selects cats and clicks Add i want to render the title cats 1 and if the user adds it again, then a cats 2 title should be added and so on and the same applies for dogs. I am stuck trying to figure this out.

Here is the working codepen.

Here is the working code:-

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/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/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>

Any help will be appreciated. Thank you.

Answer 1

You can do that by getting the latest added animal of this type, parsing the number at the end of its value, and incrementing it to append it to the value of the animal to be added:

new Vue({
  el: "#app",
  data() {
    return {
      selected: [],
      animalList: [],
      moreAnimals: [
        {
          title: "cat",
          value: "cat"
        },
        {
          title: "Dog",
          value: "dog"
        },
        {
          title: "camel",
          value: "camel"
        },
      ]
    };
  },
  methods: {
    createTitle() {
      for(let i = 0; i < this.selected.length; i++){
        let currentSelected = Object.assign({}, this.selected[i]);
        if(currentSelected.title != "camel")
             currentSelected.value = this.getAnimalName(currentSelected.title);
        this.animalList.push(currentSelected);
      }
      this.selected = [];
    },
    getAnimalName(title){
      let lastAnimal = null;
      for(let i = 0; i < this.animalList.length; i++)
         if(this.animalList[i].title == title)
           lastAnimal = this.animalList[i];
      let index = (lastAnimal) ? Number(lastAnimal.value.split(" ")[1])+1 : 1;
      return title+' '+index;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/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>