Vue.js中如何从FormulateInput选择器获取选项id？

方法一：通过value-as-object获取完整选项对象 #

给FormulateInput添加:value-as-object="true"属性，让change事件直接返回选中的完整选项对象，就能直接拿到id：

<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'"
   :value-as-object="true" <!-- 新增该属性 -->
/>

修改setZns函数，直接从返回的选项对象中取id：

setZns(selectedOption) {
    this.getZns(selectedOption.id);
},

注意：如果原来的brojZnsa是存储单个value值，现在需要改为存储整个选项对象，或者根据需求调整value的绑定逻辑。

方法二：通过选中value匹配对应id #

如果不想修改组件原有逻辑，可在setZns函数里，根据选中的value从brojeviZnsa数组中匹配对应的选项，取出id：

setZns(e) {
    const selectedValue = e.target.value;
    const selectedOption = this.brojeviZnsa.find(item => item.value === selectedValue);
    if (selectedOption) {
        this.getZns(selectedOption.id);
    }
},

这种方法无需改动组件，适合保留原有value绑定逻辑的场景，选项数量不多时性能无影响。

内容的提问来源于stack exchange，提问作者failedCoder