Vuetify v-sparkline 组件未渲染

Question

我想知道我是否可以获得组件中迷你图的一些帮助，因为我对此还很陌生。

现在，我只想显示一个具有默认设置的图表以及作为值的支柱传入的数字数组。站点打开，组件的网格部分呈现，但浏览器开发人员控制台中没有显示迷你图，也没有错误。该网站完全由 vue 提供支持。非常感谢任何提示，这几天我一直在努力反对这个问题。

<template>
    <v-container>
      <v-row>

        <v-col>
          <v-card>
            <v-sparkline :value="values"></v-sparkline>
          </v-card>
        </v-col>

        <v-col>
          <p>text</p>
        </v-col>

      </v-row>
  
      <v-row>

        <v-col>
          <p>text</p>
        </v-col>

        <v-col>
          <p>text</p>
        </v-col>

      </v-row>

    </v-container>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
 
  const props = defineProps({
    values: {
      type: Array,
    }
  });
  
  </script>

<template>
   <Heading title="Graphs" icon=mdi-chart-bar></Heading>
   <v-main class="pa-4">
        <Graph_grid :values="numbers"/> 
    </v-main>
</template>
  
  <script setup lang="ts">
    import Heading from "@/components/Heading.vue";
    import Graph_grid from "@/components/Graph_grid.vue";

    const numbers = [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0];

  </script>

Answer 1

这是如何拥有一个基本的工作迷你图组件

<template>
  <v-sparkline :model-value="value"></v-sparkline>
</template>

<script setup>
import { ref } from 'vue'

const value = ref([0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0])
</script>

这里是一个 Vuetify 游乐场。