How to get 2 selected drop-down option in one tag in vue js

Question

Please help me with this.I'm stuck from an hours. I have 2 fields 1st one is language drop-down and 2nd one is language level. When I select one of the Language and one of the language level. Then after clicking on add button..how Can I display these 2 selected option in one tag? like this Using Vue-multi select

<script>
import VueMultiselect from 'vue-multiselect'
export default {
  components: { VueMultiselect },
  data () {
    return {
      languages:[],
      selectedLanguage:[],
      languageLevels:[],
      selectedLanguageLevel:[],
      showLang: false,
    }
  },
  computed: {
    langLevel: function(){
      return this.selectedLanguage + ' - ' + this.selectedLanguageLevel 
    }
  },

  methods:{
    getLang() {
      this.showLang = true
    },

    addLanguage (newLanguage) {
      const tagLanguage = {
        language: newLanguage,
        // code: newLanguage.substring(0, 2) + Math.floor((Math.random() * 10000000))
      }
      this.languages.push(tagLanguage)
      this.selectedLanguage.push(tagLanguage)
    },
    getLanguage: function () {
      this.axios
        .get(this.baseURL + "language", {
          headers: {
            Authorization: "Bearer " + this.token,
          },
        })
        .then((response) => {
          this.languages = response.data.data;
          console.warn(response.data.data);
        })
        .catch((err) => {});
    },
    getLanguageLevel: function () {
      this.axios
        .get(this.baseURL + "language-level", {
          headers: {
            Authorization: "Bearer " + this.token,
          },
        })
        .then((response) => {
          this.languageLevels = response.data.data;
          console.warn(response.data.data);
        })
        .catch((err) => {});
    },
  },
  beforeMount() {  
    this.getLanguage();
    this.getLanguageLevel();
    this.token = "token updated";
    console.warn(this.token);
    
  },
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>

  <div class = "pl-20">
                <div class="flex">
                <label class = 'inline-block w-32 text-base text-gray2 font-normal mr-11 self-center' for="language">Language</label>
                <VueMultiselect class="w-44 mr-7 my-2.5" v-model="selectedLanguage" tag-placeholder="Add this as new language" placeholder="Search language" label="language" track-by="id" :options="languages" :multiple="true" :taggable="true" @tag="addLanguage">
                </VueMultiselect>

                <VueMultiselect class="w-44 my-2.5" v-model="selectedLanguageLevel" :options="languageLevels" placeholder="Select Level" track-by="id" label="language_level">
                </VueMultiselect>
                </div>
 
                <div class="ml-48 ">
                  <span class="text-sm mr-2.5">And</span>
                    <button class="bg-btnBgGray mr-2.5 px-1 py-0.5 rounded text-xs">Below</button>
                    <button class="bg-btnBgGray mr-2.5 px-1 py-0.5 rounded text-xs">Above</button>
                  </div>
                  <div class="ml-44 mt-2">
                    <button class="bg-gray3 text-white px-7 py-1 rounded-3xl" @click="getLang">Add</button>
                    </div>
                  <!-- <input type="text" class="border-textGray my-2.5 ml-52 pl-5 w-96 h-9 rounded-md" id="language" placeholder=""> -->
                  <div class="border border-black my-2.5 ml-44 pl-5 pt-1.5 w-96 h-9 rounded-md self-center" v-if="showLang">{{ langLevel }}</div>
                </div>
</template>

Answer 1

You can try with computed property:

new Vue({
  el: '#demo',
  data() {
    return {
      selected: '',
      options: [
        { text: 'English' },
        { text: 'Italian' },
        { text: 'Spanish' }
      ],
      level: '',
      levels: [
        { text: 'One' },
        { text: 'Two' },
        { text: 'Three' }
      ],
      showLang: false,
      tags: []
    }
  },
  methods: {
    getLang() {
      if (this.selected === '' || this.level === '') return
      let obj = {lang: this.selected, lvl: this.level }
      if(!this.containsObject(obj, this.tags)) this.tags.push(obj)
      this.showLang = true
      this.selected = ''
      this.level = ''
    },
    removeTag(i) {
      this.tags.splice(i, 1)
    },
    containsObject(obj, list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].lang === obj.lang && list[i].lvl === obj.lvl ) {
          return true;
        }
      }
      return false;
    }
  }
})

.tags {
  border-radius: .5em;
  background: #bdbdbd;
  display: inline;
  padding: .2em;
  cursor: pointer;
  font-size: .8em;
}
li {
  margin: .2em;
}
.sel {
  display: flex; 
  align-items: center;
  gap: .5em;
}
ul {
  display: flex;
  flex-wrap: wrap;
  border-radius: .5em;
  border: 1px solid grey;
  padding: .5em;
  margin: 0;
  list-style: none;
}
button {
  border-radius: 1em;
  border: transparent;
  background: #4a4a4a;
  padding: .5em 1.5em;
  cursor: pointer;
  color: white;
  margin: .5em 0;
}
h3 {
  margin: 0;
}
select {
  border: 1px solid grey;
  padding: .5em;
  border-radius: .5em;
  width: 10em;
}
#demo {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: space-between;
}
.lang {
  justify-self: center;
  width: 17em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <h3>Language</h3>
  <div class="lang">
    <div class="sel">
       <select v-model="selected">
         <option disabled value="">Language</option>
         <option v-for="option in options" :value="option.text">
           {{ option.text }}
         </option>
       </select>
       <select v-model="level">
         <option disabled value="">Level</option>
         <option v-for="option in levels" :value="option.text">
           {{ option.text }}
         </option>
       </select>
    </div>
    <button @click="getLang">Add</button>
    <ul>
      <li class="list" v-for="(tag, i) in tags" :key="i">
        <div class="tags" @click="removeTag(i)">{{ tag.lang }} {{ tag.lvl }}</div>
      </li>
    </ul>
  </div>
</div>