英文:
How to get the option id from FormulateInput select input type in Vue.js?
问题
有这个 FormulateInput 选择组件:
<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'"
/>
选项是从 API 获取的,并像这样设置:
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;
我的问题是我找不到在 change 事件处理程序中获取选项“id”的方法:
setZns(e) {
this.getZns(e.target.value);
},
e.target.value 返回当前选项的值,但我需要在 getZns 函数中获取“id”。
我尝试使用 e.target.id,但它是未定义的。
谢谢帮助!
英文:
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!
答案1
得分: 1
使用 value
作为 Id
。
以下是来自 Vue Formulate 文档的示例:Inputs / Select
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
Vue.use(VueFormulate)
const app = new Vue({
el: '#app',
data(){
return { value: null }
}
})
<!-- language: lang-css -->
#app { line-height: 1.75; }
[v-cloak] { display: none; }
<!-- language: lang-html -->
<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>
<!-- end snippet -->
英文:
Use value
for Id
Here is the sample from the Vue Formulate documentation: Inputs / Select
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
Vue.use(VueFormulate)
const app = new Vue({
el: '#app',
data(){
return { value: null }
}
})
<!-- language: lang-css -->
#app { line-height: 1.75; }
[v-cloak] { display: none; }
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论