Vue3范围滑块绑定多分辨率值：如何获取width与height？

你的核心问题是v-model绑定对象错误：range滑块返回的是1-3的数值，但你直接将其绑定到数组resolution上，导致数组被覆盖为单个数字，自然无法读取width和height属性。

修正步骤 #

1. 新增变量存储滑块选中的档位ID
2. 通过ID匹配对应分辨率对象
3. 绑定并显示正确的分辨率参数

修改后代码 #

1. 脚本部分（添加选中ID变量与计算属性）

data() {
    return {
        selectedResId: 1, // 默认选中第一个档位
        resolution: [
            {id: 1, width: 512, height: 512},
            {id: 2, width: 816, height: 816},
            {id: 3, width: 1024, height: 1024},
        ]
    }
},
computed: {
    currentResolution() {
        // 根据选中ID匹配对应分辨率对象
        return this.resolution.find(res => res.id === this.selectedResId)
    }
}

2. HTML部分（绑定选中ID并显示分辨率）

<input type="range" 
       class="form-range" 
       id="customRange1" 
       v-model="selectedResId" 
       min="1" max="3" step="1"
>

<!-- 显示当前选中的分辨率 -->
当前分辨率：{{ currentResolution.width }} × {{ currentResolution.height }}

替代方案（无需计算属性） #

如果场景简单，也可以直接在模板中匹配对象：

<input type="range" 
       class="form-range" 
       id="customRange1" 
       v-model="selectedResId" 
       min="1" max="3" step="1"
>

当前分辨率：{{ resolution.find(res => res.id === selectedResId).width }} × {{ resolution.find(res => res.id === selectedResId).height }}

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