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

在 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 能够正确地解析它们。

git-log-tracker

Git post-commit 钩子 + SQLite 提交索引工具。自动将每次提交的元数据（哈希值、作者、分支、仓库、主题）记录到本地 SQLite 数据库中，随后提供一个命令行接口（CLI），支持查询、列表展示、统计、删除和更新记录。触发场景：管理 Git 钩子、跨仓库查询提交历史、定位某次提交所属的仓库、查看提交统计信息、将提交记录写入本地索引。当用户提及“提交日志记录”、“提交索引”、“跨仓库查找提交”、“Git 钩子管理”，或希望以结构化方式查询其提交历史时（即使未明确指出该工具），请使

下载

<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>
              @@##@@
            </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>