vue.js - 使用 'v-for' 构建 HTML 选择选项并将键分配为选项值

Question

我有以下带有 Vue 语法的 HTML：

<select id='select-id' >
  <option selected disabled value=''>Select Option</option>
  <option v-for="(value, key) in object">{{ key }} - {{ value}}</option>
</select>

这将使用对象的键：值对中的选项构建我的选择。但是，我想将键分配为选项值：

<select id='select-id' >
  <option selected disabled value=''>Select Option</option>
  <option v-for="(value, key) in object" value='{{ key }}'>{{ key }} - {{ value}}</option>
</select>

但这不起作用

标签： vue.jsvue-component

Answer 1

从模板语法 - 插值...

属性

不能在 HTML 属性中使用胡须。相反，使用v-bind 指令

例如

<option v-for="(value, key) in object" :value="key">
  {{ key }} - {{ value}}
</option>

---

进一步阅读：

• 表单输入绑定 - 基本用法 - 选择
• 表单输入绑定 - 值绑定 - 选择选项