vue.js - 从选项循环中获取选定的对象

Question

我试图找到一种方法来绑定(bind) Vue 选择元素中的对象数组。案例有点如下:

data: {
  ideas: [
    { id: 1, code: "01A", text: "option 1", props: [] }, 
    { id: 2, code: "02A", text: "option 2 , props: [{ details: "something" }]}
  ]},
  currentForm: {
    something: "foo",
    else: "bar",
    ideaCode: "01A",
    text: "option 1"
  }
];

...和在 HTML ...

<select v-model="currentForm.ideaCode" @change="setCodeAndLabelForForm(???)">
  <option v-for="i in ideas" value="i">{{ i.text }}<option>
</select>

基本上我需要能够跟踪哪个 对象 用户选择，触发我自己的更改事件，同时与另一个对象的单个键绑定(bind)...选定的值/引用键应与用户选择的选项/对象分开。 注意:currentForm 与选项的对象类型不同!它只包含选项碰巧具有的一些属性，并且我试图通过触发用户选择的更改事件来将其转移到选项。

问题是我还没有弄清楚如何为函数传递当前选定的值或如何编写如下内容:

<select v-model="selectedIdea" @change="setCodeAndLabelForForm" :track-by="currentForm.ideaCode">
  <option v-for="i in ideas" value="i">{{ i.text }}<option>
</select>

一种可能(和有效)的方法是:

<select v-model="currentForm.ideaCode" @change="setCodeAndLabelForForm">
  <option v-for="i in ideas" value="i.ideaCode">{{ i.text }}<option>
</select>

setCodeAndLabelForForm: function() {
    var me = this;
    this.ideas.forEach(function(i) {
        if(i.ideaCode == me.currentForm.ideaCode) {
            me.currentForm.ideaCode = i.selectedIdea.ideaCode;
            me.currentForm.text = i.text;
            ... do stuff & run callbacks ...
        }
    });
}

......但它看起来很可怕。有什么更好的建议吗？

Answer 1

你可以这样实现:

创建空对象数据以跟踪所选值:

currentForm: {}

在模型上观察 currentForm 并传递选定的对象:

<select v-model="currentForm" @change="setCodeAndLabelForForm(currentForm)">

在 option 中传入选定的值:(你在这一步做得对，但我只是将 i 更改为 idea 因为它有点令人困惑的循环索引)

<option v-for="idea in ideas" :value="idea">{{ idea.text }}<option>

应用你的方法:

setCodeAndLabelForForm(selected) {
  // Now, you have the user selected object
}