Vuejs 3 替代 select 绑定

Question

我正在尝试将 select 元素绑定到自定义对象的值。这里的关键是所讨论的对象属性有一个自定义的 getter。该值设置为数字，但在访问时 returns 关联值作为字符串。为什么我这样做是一个很长的故事。

所以我有一个键值对对象做一些选择：

<select v-model="myObject.myProperty">
    <option v-for="v, k in myOptions" :key="k" :value="k">{{v}}</option>
</select>
{{myObject.myProperty}} //this line prints out the correct value

但是选项没有显示为 selected。 myObject.myProperty 的值已更新，它是我所期望的 returns。我怀疑在幕后，它正确地将 k 分配给了我的自定义对象，但是因为它 returns 是一个不同的字符串值，所以 Vue 本身无法确定要标记哪个选项 'selected' .

手动添加 :selected 没有帮助：

<option v-for="v, k in myOptions" :key="k" :value="k" :selected="v === myObject.myProperty">{{v}}</option>

我也试过手动绑定select而不是使用v-model属性，同样不行：

<select :value="myObject.myProperty" @input="myObject.myProperty = $event.target.value"

是否有其他方法来连接 select/option 情况？如果没有，我的下一步是构建具有仿 select 功能的自定义组件。

为清楚起见，myOptions 是这样的键值

{ 
    0 : 'Option 1', 
    1 : 'Option 2',
}

但是 myObject 有特殊的设置器，可以获取并记住密钥，然后还有一个特殊的 getter 而不是 returns 来自 myOptions 的值。

那么：

myObject.myProperty = 0;
console.log(myObject.myProperty) //logs 'Option 1'

When when I set the value to the key (k) I get back the corresponding value when the option is selected and the value of 'myObject.myProperty' is what I expect .示例：我从下拉列表中选择 'Option 1'，它的值 0 来自键 k.

然而，尽管 myObject.myProperty 具有我想要的值，但我无法让 Vue 将实际的 html 选项显示为 selected，可能是因为返回的值myObject.myProperty 是 'Option 1' 而不是 0

Answer 1

不确定我是否正确理解您的问题。因此，在下面添加我对您的要求的意见。

As myObject.myProperty 返回您在 select 中传递的值，并且根据您的代码，您将 index 作为值传递。

因此，在 :selected 中进行比较时，LHS 和 RHS 都应包含您通过的项目的 index。

工作演示：

const app = new Vue({
  el: '#app',
  data() {
    return {
      myOptions: [{
        id: 1,
        name: 'alpha'
      }, {
        id: 2,
        name: 'beta'
      }, {
        id: 3,
        name: 'gama'
      }],
      myObject: {
        myProperty: ''
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <select v-model="myObject.myProperty">
      <option v-for="(item, index) in myOptions" :selected="myObject.myProperty === item.id" :key="item.id" :value="item.id">{{item.name}}</option>
    </select>
    {{myObject.myProperty}}
  </div>

Answer 2

更新基于新提供的信息。

在模板中：

    <select v-model="selectedOption">
      <option v-for="(v, k) in options" :key="k" :value="k">
        {{ v }}
      </option>
    </select>

在 JS 中

data() {
  return {
    selectedOption: null,
    options: {
      0: 'Option 1',
      1: 'Option 2',
    },
  };
}

通过选项键设置selectedOption将正确显示所选选项。

这是一个 link 使用您的数据结构的工作示例。它包含两个选择，都使用相同的对象作为其数据源。一个带有默认选择。另一个没有。 https://stackblitz.com/edit/vue-efekym?file=src/App.vue

根据最新信息，这已经过时了根据您进一步示例中的逻辑，我认为问题在于将循环中的 k 和 v 变量合并在一起。虽然很难说，因为没有任何示例数据或完全隔离的组件可以排除该行为。

~~但是在你后面的例子中你有：~~

~~<option v-for="v, k in myOptions" :key="k" :value="k" :selected="v === myObject.myProperty">{{v}}</option>~~

~~我推断您认为 myObject.myProperty 持有变量 v 的值，而实际上您将值设置为变量 k在 :value="k"~~

见证

通过更正此问题，我相信您的问题将会得到解决，您还注意到了 int 到 string 的转换。取决于 how/where 这正在发生，这也可能导致您头疼，因为这永远不会等同于 true。 '1231' === 1231

Answer 3

好的，实际答案：

<select @input="myObject.myProperty = $event.target.value">
    <option v-for="v, k in myOptions" :selected="myObject.myProperty === v" :key="k" :value="k">{{v}}</option>
</select>

v-model 在这里不起作用，因为它根本不关心您是否手动应用了 selected：它总是会尝试将选项值与 v-model 属性值。由于此对象采用一个值 setter 和 returns 另一个值 getter，因此它们永远不会对齐。

相反，使用 @input 手动将值分配给对象，并将 getter 中的值与 selected 选项中的值相匹配。

Vuejs 3 替代 select 绑定

Vuejs 3 alternative select binding

vue.js

vuejs3