1

I have this FormulateInput select component:

<FormulateInput
   name="broj_zns-a"
   @change="setZns"
   :value="brojZnsa"
   type="select"
   label="Broj ZNS-a*"
   validation="required"
   :validation-messages="{required: 'Ovo polje je obavezno'}"
   :options="this.brojeviZnsa"
   :placeholder="this.brojeviZnsa.length > 0 ? 'Odaberite' : 'Nema podataka'"
/>

Options are fetched from API and are set like this:

let brojeviZnsa = res.data.map(zns => ({
    'value': zns["zns_unos_podataka_broj_znsa"],
    'label': zns["zns_unos_podataka_broj_znsa"],
    'id': zns["id"],
}));
this.brojeviZnsa = brojeviZnsa;

My problem is that I cant find a way to fetch option "id" in change event handler:

setZns(e) {
    this.getZns(e.target.value);
},

e.target.value returns the value of the current option, but I need the "id" in the getZns function.

I tried using e.target.id but it is undefined.

Thanks for the help!

Tolbxela
  • 4,767
  • 3
  • 21
  • 42
failedCoder
  • 1,346
  • 1
  • 14
  • 38

1 Answers1

1

Use value for Id

Here is the sample from the Vue Formulate documentation: Inputs / Select

Vue.use(VueFormulate)
const app = new Vue({
    el: '#app',
    data(){      
      return { value: null }
    }
})
#app { line-height: 1.75; }
[v-cloak] { display: none; }
<link href="
https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.5.3/dist/snow.min.css
" rel="stylesheet">
<div id="app" v-cloak>
value: {{value}}<br/>
<formulate-input
  v-model="value"
  type="select"
  :options="[
    { value: 'first', label: 'First name' },
    { value: 'last', label: 'Last name' },
    { value: 'initial', label: 'Middle Initial', id: 'name-initial' },
    { value: 'maiden', label: 'Maiden name', disabled: true },
  ]"
></formulate-input>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://unpkg.com/@braid/vue-formulate@2.5.3/dist/formulate.min.js"></script>
Tolbxela
  • 4,767
  • 3
  • 21
  • 42
  • Great idea, but that only works for setting the value. Once the value is set and I refresh the page, selected option is empty, even tho it is saved properly on the backend. I assume that happens because Vue expects "broj_zns-a" value from backend to contain the id I set as value in order to populate the value – failedCoder Mar 15 '23 at 17:17
  • 1
    You have to set the value from backend using `v-model` – Tolbxela Mar 15 '23 at 19:07
  • 1
    Thank you so much! I had to change a few things but it worked! This was my first time working in Vue.js so I wouldn't be able to do it without your help – failedCoder Mar 16 '23 at 13:03