Vuetify组件v-slider无宽度显示异常问题求助

核心原因 #

空的<v-slider>或未设置基础范围属性时，组件无法计算轨道宽度与渲染范围，仅会显示居中的滑块thumb。

解决步骤 #

• 必须设置范围属性：v-slider至少需要指定min和max（min默认值为0，可省略但建议明确设置），让组件确定轨道的数值范围。示例：

  <v-slider min="0" max="10"></v-slider>
  

• 检查父容器布局：你的父容器.formItem__grade可能存在宽度限制或非块级布局，导致slider无法获取可用宽度。可给容器添加Vuetify内置类w-100或自定义width: 100%样式：

  <div v-if="typeList[0] === 'grade'" class="formItem__grade w-100">
    <!-- 内部组件 -->
  </div>
  

• 修复带刻度的slider代码：针对你注释中的代码，注意ticks需要是数值数组，如果item.meta.answers是文本选项（如["差","中","良"]），需将radio的value绑定为对应数值，同时让slider属性匹配数值范围：

  <div v-if="typeList[0] === 'grade'" class="formItem__grade w-100">
      <v-radio-group v-model="item.value" inline>
           <!-- 将radio的value设为对应数值 -->
           <v-radio v-for="(el, idx) in item.meta.answers" :label="el" :value="idx + 1" :disabled="disable"></v-radio>
      </v-radio-group>
      <v-slider v-model="item.value"
          :min="1"
          :max="item.meta.answers.length"
          <!-- 生成与选项数量匹配的数值刻度数组 -->
          :ticks="Array.from({length: item.meta.answers.length}, (_, i) => i + 1)"
          show-ticks="always"
          step="1"
          tick-size="3"
      ></v-slider>
  </div>
  

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