Vue中如何使用v-for实现选项渲染并存储选中项？

我来帮你排查下问题所在，你遇到的destination返回NaN的情况，主要来自几个代码细节的疏漏，咱们一步步解决：

核心问题点 #

1. 选项文本未使用插值语法：你写的dest.displayName会被当作纯字符串渲染，而不是读取对象的属性值，这不仅会导致下拉框显示异常，还可能间接影响绑定逻辑。
2. key值使用不规范：Vue要求v-for的:key必须是字符串或数字类型，直接用对象dest作为key会导致虚拟DOM更新异常，干扰选中值的绑定。
3. 未正确初始化绑定变量：如果destination在data中没有初始化（或者初始值类型与选项的:value不匹配，比如初始为undefined），Vue在尝试绑定对象时会出现解析错误，最终返回NaN。

修正后的完整代码 #

模板部分 #

<fieldset>
  <label for="country">Country</label>
  <select name="country" id="country" v-model="destination">
    <option 
      v-for="dest in destinations" 
      :value="dest" 
      :key="dest.displayName" <!-- 改用唯一字符串作为key，有id的话用dest.id更稳妥 -->
    >
      {{ dest.displayName }} <!-- 使用插值语法渲染国家名称 -->
    </option>
  </select>
</fieldset>

Vue实例数据部分 #

export default {
  data() {
    return {
      // 示例国家数组，根据你的实际数据结构调整
      destinations: [
        { displayName: 'China', code: 'CN' },
        { displayName: 'United States', code: 'US' },
        { displayName: 'Japan', code: 'JP' }
      ],
      // 初始化绑定变量：可以设为null，或者数组中的默认选项
      destination: null
    }
  }
}

额外注意事项 #

• 如果你的destinations是异步加载的（比如从接口获取），建议在数据加载完成前给下拉框加个加载状态，或者把destination的初始值设为null，避免绑定到未定义的对象。
• 如果每个国家对象有唯一ID（比如id字段），优先用dest.id作为:key，比displayName更可靠，避免出现名称重复的场景。

内容的提问来源于stack exchange，提问作者83nd1x