更改时如何将键作为 v-for 的选择选项值传递（VueJS）

在Vue.js中，您可以使用v-for指令来循环遍历一个数组或对象，并将其作为选择选项的值进行传递。

以下是一个示例，演示了如何将键作为选择选项值传递：

<template>
  <div>
    <label for="select">选择选项：</label>
    <select id="select" v-model="selectedOption">
      <option v-for="(value, key) in options" :value="key">{{ key }}</option>
    </select>
    <p>选中的选项：{{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        option1: '选项 1',
        option2: '选项 2',
        option3: '选项 3'
      },
      selectedOption: ''
    };
  }
};
</script>

在上述示例中，我们有一个包含选项的对象options，其中键作为选项的值。在<select>元素内部，我们使用v-for指令来循环遍历options对象的键值对。在每次循环中，我们将键作为选项的值，并使用key作为选项的文本。使用v-model指令将选中的选项与selectedOption数据属性进行绑定，以跟踪用户选择的选项。

这样，每个选项的值将是其对应的键。当用户选择一个选项时，selectedOption数据属性将更新为选项的键，并在页面上显示。