CODEWITHSUNDEEP
vue.jsvuetify.js
TheDevGuy
TheDevGuy

Reputation: 703

Access to a props in slots

Have you an idea how to access to a props for check the condition.

for example

<template>
    <v-data-table
            :headers="headers"
            :items="fixtures"
            :items-per-page="5"
            class="elevation-10"
    >
        <template v-slot:item.on="{ item }">
            <td>{{item.on}}</td>
        </template>

        <template v-slot:item.action="{ item }">
            <v-icon left >mdi-lightbulb-on</v-icon>
            <v-icon left >mdi-play-circle</v-icon>
            <v-icon left >mdi-pause-circle</v-icon>
        </template>

    </v-data-table>
</template>

I want to display 'on' if my fixture.on is true or 'Off' if it's false.

Same, I want display the icon play when fixture.on is false and icon pause when true.

And one last question, How do you make a method on it ?

Upvotes: 1

Views: 535

Answers (1)

skirtle
skirtle

Reputation: 29112

Here are a few different ways of doing it. This shows using a filter, a method, an inline expression and a v-if/v-else:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
  data () {
    return {
      fixtures: [ { on: true }, { on: false } ],
      headers: [
        { text: 'On', value: 'on' },
        { text: 'Action', value: 'action' }
      ]
    }
  },
  
  filters: {
    onOffFilter (value) {
      return value ? 'On' : 'Off'
    }
  },
  
  methods: {
    onOffMethod (value) {
      return value ? 'On' : 'Off'
    }
  }
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-data-table
      :headers="headers"
      :items="fixtures"
      :items-per-page="5"
      class="elevation-10"
    >
      <template v-slot:item.on="{ item }">
        <div>{{ item.on | onOffFilter }}</div>
        <div>{{ onOffMethod(item.on) }}</div>
        <div>{{ item.on ? 'On' : 'Off' }}</div>
        <div>
          <template v-if="item.on">On</template>
          <template v-else>Off</template>
        </div>
      </template>

      <template v-slot:item.action="{ item }">
        <v-icon left>mdi-lightbulb-on</v-icon>
        <v-icon left v-if="item.on">mdi-pause-circle</v-icon>
        <v-icon left v-else>mdi-play-circle</v-icon>
      </template>
    </v-data-table>
</v-app>
</div>

For the icon I've just used a v-if/v-else.

Upvotes: 1

Related Questions