如何将变量放在 span 或 v-tooltip 标签中？

Question

我将 vue 2 与 vuetify 2 一起使用，显示表中的数据时出现问题。 当我在 v-tooltip 标签之间添加花括号时，我得到了空白页。 下面的代码示例。

<v-row class="pa-2" 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-tooltip top>
                    <template v-slot:activator="{on, attrs}">
                      <span v-bind="attrs" v-on="on" <----------------- there's a problem
                        >{{item.location.street.number
                        item.location.street.name}}</span
                      >                               -----------------
                    </template>

                    <span> X: {{item.coordinates.latitude}}<br />   <------- there's a problem
                    Y: {{item.coordinates.longitude}}</span
                    >                                               ---------
                  </v-tooltip>
                </v-col>
                <v-divider vertical inset></v-divider>
               [...]

所以我想从我的列表中显示该数据，就像我在代码的 rest 中所做的那样，其中的不是span和v-tooltip 。

---

添加更多代码

所以我有我想要显示数据的列表

<script>
      new Vue({
        el: '#app',
        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: 'brian.adams@example.com',
              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',
            },
[...]

Answer 1

好像您缺少花括号：

原来的

 <template v-slot:activator="{on, attrs}">
    <span v-bind="attrs" v-on="on" <----------------- there's a problem>
        {{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>