Vuetify 滑块停留在中间根本不动？

Question

滑块停留在中间并且根本不移动。

• 版本信息
  • 版本 3.2.45
  • 虚拟化3.1.0
  • 维特4.0.0

<script>
export default {
  data: () => ({
    slider1: 0,
    slider2: 50,
    slider3: 100,
  }),
};
</script>

<template>
  <div>
    <v-card>
      <v-slider v-model="slider1"></v-slider>
      <v-slider v-model="slider2"></v-slider>
      <v-slider v-model="slider3"></v-slider>
    </v-card>
  </div>
</template>

这是复制链接。 https://play.vuetifyjs.com/#eNqVUttSwyAQ/ZUdnuxMA73YF0w79TtKH2Kgig2EARJ1Ov13NyR2elFHn2DP7p49HHZzII/O0bZRhJM8lF67uBJWvbvaR5BqVzRVhiowalkibye7ESxXcJcQgFBpqfy Uw2R8Dsw4LC6ROYfppIeOIzyOD8Lm7DQPg6iMq4qoMALIpW7TBa9tVhZeDlGKe0poM1NLVS0FGWQIssrZV/oPDbP/NSy/a+iAk8Kc9cpzdvYeMibadIZmpnD0NdQWzU4OiiERBOG9yx2Gv9HFgrzE6AJ nrLFu/0zL2rA15phvbNRGZbI26zmd0fsFTg3xHKcqmOzJ129BeZwoyPAbiTzq3cdPA4Y08k7ppKcdoI7yhoohf6t85pVFR5T/VfdV7YX2q9yN/rQ5uDfoZaXtPlzZWIZk4WbblRzHpKfG4vQ osv0EPDvxww==

Answer 1

为了使您的应用程序正常工作，您必须将其包装在v-app组件中。该组件是确保正确的跨浏览器兼容性所必需的。

<v-app>
  <v-card>
    <v-slider v-model="slider1"></v-slider>
    <v-slider v-model="slider2"></v-slider>
    <v-slider v-model="slider3"></v-slider>
  </v-card>
</v-app>