How to put variable in span or v-tooltip tag?-CodePudding

I'm using vue 2 with vuetify 2 and there's occured a problem with displaying data from table. When I'm adding curly braces between v-tooltip tags I've getting blank page. Code example below.

<v-row  v-for="item in workerList" :key="item">
                <v-col
                  cols="1"
                  md="1"
                  
                >
                  <v-avatar>
                    <img
                      :src="item.picture.medium"
                      :alt="item.name.first"
                    /> </v-avatar
                ></v-col>
                <v-col
                  cols="2"
                  md="2"
                  
                >
                  {{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>
               [...]

So I want to display that data from my list like I did in the rest of the code where's isn't a span and v-tooltip.

adding more code

So I've got my list from where I want to display data

<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: '[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',
            },
[...]

CodePudding user response：

it seems like you are missing your curly braces:

original

 <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>

fixed

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