使用插槽中的道具

Question

你知道如何使用道具来检查状况吗？

例如

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

如果我的fixture.on是真的，我想显示'on‘，如果它是假的，我想显示'Off’。

同样，我希望在fixture.on为假时显示图标播放，当为真时显示图标暂停。

最后一个问题，如何在它上创建一个方法？

Answer 1

这里有几种不同的方法。这显示了使用筛选器、方法、内联表达式和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/font@3.9.97/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.1.1/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.1.1/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>

​

对于图标，我刚刚使用了一个v-if/v-else。