从选项循环中获取选定的对象

Question

我正在尝试找到一种方法来绑定 Vue select-element 中的对象数组。情况大致如下：

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>

基本上我需要能够跟踪用户选择的对象，触发我自己的更改事件，同时与另一个对象的单个键绑定...所选值/引用键应该与用户选择的选项/分开目的。注意：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
}

Answer 2

自从我问这个问题以来已经有一段时间了，对于处理这种情况已经有很好的建议了。我不记得这里提出的确切业务案例，但快速浏览一下，我似乎无法弄清楚如何在之后设置/初始化正确的选择，因为仅处理 @change 事件是小孩子的游戏 - 这是配对将一个值与基于对象的选项列表进行比较，这是比较困难的。我最有可能寻找的是 AngularJS 曾经拥有的东西（按属性跟踪，它将任何给定值与选定选项相匹配）。

就我个人而言，现在我会分离 UI 逻辑，而不是试图强迫它们混合在一起。对我自己来说最可行的方法是将选项列表和所选选项作为一个逻辑区域进行处理（即 data: { list: [...options], selectedIdea: Object }）并将“currentForm”对象与选择分开。让我们来解释一下：

• selectedIdea 是需要触发 currentForm 对象的更改的东西。它不是任何类型的混合模型，它只是一个普通的对象，可用的选择之一，纯粹而简单。
• ...再一次：每当 selectedValue === 选项之一时，选择下拉列表会自动设置为正确的选择。
• “currentForm”对象有一个可用于设置 selectedIdea 的属性。在本例中，它是“ideaCode”。这个 ideaCode 不会自动进行任何配对，或者此类组件逻辑需要表示规则，这会触发选择与“ideaCode”匹配的正确选项。
• 只是一个额外的想法：selectedIdea 和 currentForm-object 是两个不同的逻辑元素。如果有人愿意的话，它们甚至可以分成不同的组件，在某些情况下，将它们分开确实是一件好事。

因此，通过这些陈述，我想我会将我的选择的 v-model 更改为它应该的样子：选定的对象之一（将 v-model="currentForm.ideaCode" 更改为 v-model="selectedIdea" 等） 。然后，我只需为 selectedIdea 添加观察程序，并从那里对 currentForm-object 进行任何更改。

通过 currentForm.ideaCode 初始化该选项怎么样？对 create-method 执行以下操作之一：

• 迭代可用选项列表。当您找到 option where currentForm.ideaCode == option.code => this.selectedIdea = option
• ...或者使用 ecmascript find-method 来做同样的事情
• ...或者使用 underscore/lodash find-method 来做同样的事情

另一种方法是使用计算值，正如 Augusto Escobar 所建议的那样。正如 feng zhang 所建议的， $ref 也可以工作，但是这种方法仍然需要解决方案来初始化正确的选项（当使用初始值加载编辑器时）。也感谢 Bhojendra Rauniyar——你一直都是对的，但我就是无法理解答案，因为我无法弄清楚如何回溯最初的选择。

感谢这一年来所有的建议！