在 Vuetify 2 的 v-tooltip 中正确显示变量数据-html教程-PHP中文网

在 Vuetify 2 的 v-tooltip 中正确显示变量数据

DDD

发布： 2025-11-20 12:35:19

原创

523人浏览过

在 vuetify 2 的 v-tooltip 中正确显示变量数据

本文档旨在解决在使用 Vuetify 2 的 v-tooltip 组件时，如何正确地将变量数据插入到 tooltip 的内容中。通过示例代码和详细解释，你将学会避免常见的错误，并确保数据能够正确显示。

在使用 Vuetify 2 的 v-tooltip 组件时，你可能会遇到无法正确显示变量数据的问题，尤其是在 v-slot:activator 内部使用 span 标签时。出现空白页或数据无法渲染通常是由于花括号的使用不当造成的。下面我们将详细介绍如何正确地将变量数据插入到 v-tooltip 组件中。

问题分析

常见的问题在于直接在 span 标签内部使用花括号连接变量，例如：

<template v-slot:activator="{on, attrs}">
  <span v-bind="attrs" v-on="on">
    {{item.location.street.number
    item.location.street.name}}
  </span>
</template>

登录后复制

这种写法会导致解析错误，因为 Vue 无法正确识别变量。

立即学习“前端免费学习笔记（深入）”；

解决方案

正确的做法是将每个变量都用独立的花括号包裹起来，确保 Vue 能够正确地解析它们。

千帆大模型平台

面向企业开发者的一站式大模型开发及服务运行平台

查看详情

<template v-slot:activator="{on, attrs}">
  <span v-bind="attrs" v-on="on">
    {{item.location.street.number}}
    {{item.location.street.name}}
  </span>
</template>

登录后复制

或者，你也可以使用模板字符串来更清晰地组织你的数据：

<template v-slot:activator="{on, attrs}">
  <span v-bind="attrs" v-on="on">
    {{ `${item.location.street.number} ${item.location.street.name}` }}
  </span>
</template>

登录后复制

这种方法不仅可以正确显示数据，还可以方便地添加空格或其他分隔符。

完整示例

下面是一个完整的示例，展示了如何在 v-tooltip 中正确显示来自列表的数据：

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row v-for="item in workerList" :key="item">
          <v-col cols="1" md="1" class="d-flex justify-center align-center">
            <v-avatar>
              <img :src="item.picture.medium" :alt="item.name.first" />
            </v-avatar>
          </v-col>
          <v-col cols="2" md="2" class="d-flex justify-center align-center">
            {{ item.name.first }} {{ item.name.last }}
          </v-col>
          <v-divider vertical inset></v-divider>
          <v-col cols="auto">
            <v-tooltip top>
              <template v-slot:activator="{ on, attrs }">
                <span v-bind="attrs" v-on="on">
                  {{ item.location.street.number }}
                  {{ item.location.street.name }}
                </span>
              </template>
              <span>
                X: {{ item.coordinates.latitude }}
                <br />
                Y: {{ item.coordinates.longitude }}
              </span>
            </v-tooltip>
          </v-col>
          <v-divider vertical inset></v-divider>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

export default {
  vuetify: new Vuetify(),
  data: () => ({
    workerList: [
      {
        gender: 'male',
        name: {
          first: 'Brian',
          last: 'Adams',
        },
        location: {
          street: {
            number: 734,
            name: 'Park Road',
          },
          city: 'Stoke-on-Trent',
          state: 'County Fermanagh',
          country: 'United Kingdom',
          postcode: 'XR3 9EY',
          coordinates: {
            latitude: '18.0015',
            longitude: '-86.0374',
          },
        },
        email: '[email protected]',
        registered: '2008-11-07T11:53:14.120Z',
        phone: '015394 84142',
        cell: '0737-492-043',
        isActive: true,
        picture: {
          medium: 'https://randomuser.me/api/portraits/med/men/42.jpg',
          thumbnail: 'https://randomuser.me/api/portraits/thumb/men/42.jpg',
        },
        nationality: 'GB',
      },
    ],
  }),
};
</script>

登录后复制