Repeat Multiselect Rerender

by libertie

HTML

<script src="https://unpkg.com/vue@3.0.4/dist/vue.global.js"></script>
<script src="https://unpkg.com/@vueform/multiselect"></script>
<link rel="stylesheet" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
<div id="app">
  <p>Search for and select a language that does not appear by default. Then add a field. The triggered rerender removes visual feedback on the first multiselect.</p>
  
  <div v-for="field in form" :key="field.key">
    #{{ field.key + 1 }}
    <Multiselect
      v-model="field.value"
      :delay="200"
      :filter-results="false"
      :options="async (query) => await fetchRecords(query)"
      placeholder="Select a language"
      searchable
     />
  </div>

  <button
    @click="add"
    type="button"
  >Add field</button>

  <p>Form: {{ form }}</p>
</div>

CSS

p {
  font-size: .8em;
}
button {
  margin: 1em 0;
}
div#app > div {
  align-items: center;
  display: flex;
  gap: 1em;
}

JavaScript

const app = Vue.createApp({
  data: () => ({
    counter: 0,
    form: [
    	{ key: 0, value: null }
    ]
  }),

  methods: {
  	add() {
    	this.form.push({ key: this.form.length, value: null });
    },
  	async fetchRecords(query) {
    	let url = 'https://parseapi.back4app.com/classes/All_Programming_Languages?order=ProgrammingLanguage&keys=ProgrammingLanguage';

      if (query) {
        url += '&where=' + encodeURIComponent(JSON.stringify({
          "ProgrammingLanguage": {
            "$regex": `${query}|${query.toUpperCase()}|${query[0].toUpperCase() + query.slice(1)}`
          }
        }))
      }

    	const response = await axios.get(url, {
      	headers: {
          'X-Parse-Application-Id': 'XpRShKqJcxlqE5EQKs4bmSkozac44osKifZvLXCL',
          'X-Parse-Master-Key': 'Mr2UIBiCImScFbbCLndBv8qPRUKwBAq27plwXVuv',
        }
      })
      .then(response => {
      	if (Array.isArray(response.data.results)) {
          let r = response.data.results.map(item => ({
            value: item.ProgrammingLanguage,
            label: item.ProgrammingLanguage
          })).splice(0, 5);
          return r;
        }
        return [];
      });
      
      return await response;
    }
  }
});

app.component('Multiselect', VueformMultiselect)
app.mount('#app')