如何从Vue.js中的FormulateInput选择输入类型中获取选项ID？

huangapple
go评论100阅读模式
英文:

How to get the option id from FormulateInput select input type in Vue.js?

问题

有这个 FormulateInput 选择组件：

  1. <FormulateInput
  2.    name="broj_zns-a"
  3.    @change="setZns"
  4.    :value="brojZnsa"
  5.    type="select"
  6.    label="Broj ZNS-a*"
  7.    validation="required"
  8.    :validation-messages="{required: 'Ovo polje je obavezno'}"
  9.    :options="this.brojeviZnsa"
  10.    :placeholder="this.brojeviZnsa.length > 0 ? 'Odaberite' : 'Nema podataka'"
  11. />

选项是从 API 获取的，并像这样设置：

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

我的问题是我找不到在 change 事件处理程序中获取选项“id”的方法：

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

e.target.value 返回当前选项的值，但我需要在 getZns 函数中获取“id”。

我尝试使用 e.target.id，但它是未定义的。

谢谢帮助！

英文:

I have this FormulateInput select component:

  1. <FormulateInput
  2.    name="broj_zns-a"
  3.    @change="setZns"
  4.    :value="brojZnsa"
  5.    type="select"
  6.    label="Broj ZNS-a*"
  7.    validation="required"
  8.    :validation-messages="{required: 'Ovo polje je obavezno'}"
  9.    :options="this.brojeviZnsa"
  10.    :placeholder="this.brojeviZnsa.length > 0 ? 'Odaberite' : 'Nema podataka'"
  11. />

Options are fetched from API and are set like this:

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

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

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

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

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  5. Vue.use(VueFormulate)
  6. const app = new Vue({
  7.     el: '#app',
  8.     data(){      
  9.       return { value: null }
  10.     }
  11. })
  13. <!-- language: lang-css -->
  15. #app { line-height: 1.75; }
  16. [v-cloak] { display: none; }
  18. <!-- language: lang-html -->
  20. <link href="
  21. https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.5.3/dist/snow.min.css
  22. " rel="stylesheet">
  23. <div id="app" v-cloak>
  24. value: {{value}}<br/>
  25. <formulate-input
  26.   v-model="value"
  27.   type="select"
  28.   :options="[
  29.     { value: 'first', label: 'First name' },
  30.     { value: 'last', label: 'Last name' },
  31.     { value: 'initial', label: 'Middle Initial', id: 'name-initial' },
  32.     { value: 'maiden', label: 'Maiden name', disabled: true },
  33.   ]"></formulate-input>
  34. </div>
  35. <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
  36. <script src="https://unpkg.com/@braid/vue-formulate@2.5.3/dist/formulate.min.js"></script>
  38. <!-- 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 -->

  1. Vue.use(VueFormulate)
  2. const app = new Vue({
  3.     el: &#39;#app&#39;,
  4.     data(){      
  5.       return { value: null }
  6.     }
  7. })

<!-- language: lang-css -->

  1. #app { line-height: 1.75; }
  2. [v-cloak] { display: none; }

<!-- language: lang-html -->

  1. &lt;link href=&quot;
  2. https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.5.3/dist/snow.min.css
  3. &quot; rel=&quot;stylesheet&quot;&gt;
  4. &lt;div id=&quot;app&quot; v-cloak&gt;
  5. value: {{value}}&lt;br/&gt;
  6. &lt;formulate-input
  7.   v-model=&quot;value&quot;
  8.   type=&quot;select&quot;
  9.   :options=&quot;[
  10.     { value: &#39;first&#39;, label: &#39;First name&#39; },
  11.     { value: &#39;last&#39;, label: &#39;Last name&#39; },
  12.     { value: &#39;initial&#39;, label: &#39;Middle Initial&#39;, id: &#39;name-initial&#39; },
  13.     { value: &#39;maiden&#39;, label: &#39;Maiden name&#39;, disabled: true },
  14.   ]&quot;
  15. &gt;&lt;/formulate-input&gt;
  16. &lt;/div&gt;
  17. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js&quot;&gt;&lt;/script&gt;
  18. &lt;script src=&quot;https://unpkg.com/@braid/vue-formulate@2.5.3/dist/formulate.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月15日 20:40:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/75744850.html
  • javascript
  • vue-component
  • vue-formulate
  • vue.js
  • vuejs2
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定