如何更改数据中的值-TABLE

Question

你好，如何更改数据中的此值 table，true 更改为活动或 false 为非活动

在 vue js 和 vuetify 中添加我的代码我喜欢在行状态中更改值，将此值 true 更改为活动状态或在非活动状态下为 false，我正在使用 axios 从 csharp 连接 api 接下来的代码我要添加我想要的图像

<template>
<v-data-table
:headers="headers"
:items="categories"
sort-by="Name"
class="elevation-1"
:search="search"
 >
<template v-slot:top>
  <v-toolbar flat>
    <v-toolbar-title>Categories</v-toolbar-title>
    <v-divider class="mx-4" inset vertical></v-divider>
    <v-spacer></v-spacer>
    <v-text-field
      v-model="search"
      append-icon="search"
      label="Search"
      single-line
      hide-details
    ></v-text-field>
    <v-spacer></v-spacer>
    <v-dialog v-model="dialog" max-width="500px">
      <template v-slot:activator="{ on, attrs }">
        <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">
          New Item
        </v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="text-h5">{{ formTitle }}</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12" sm="6" md="4">
                <v-text-field
                  v-model="editedItem.namecategory"
                  label="Name"
                ></v-text-field>
              </v-col>
              <v-col cols="12" sm="6" md="4">
                <v-text-field
                  v-model="editedItem.descategory"
                  label="Description"
                ></v-text-field>
              </v-col>
              <v-col cols="12" sm="6" md="4">
                <v-text-field
                  v-model="editedItem.numberstatate"
                  label="State"
                ></v-text-field>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="close"> Cancel </v-btn>
          <v-btn color="blue darken-1" text @click="save"> Save </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="dialogDelete" max-width="500px">
      <v-card>
        <v-card-title class="text-h5"
          >Are you sure you want to delete this item?</v-card-title
        >
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="closeDelete"
            >Cancel</v-btn
          >
          <v-btn color="blue darken-1" text @click="deleteItemConfirm"
            >OK</v-btn
          >
          <v-spacer></v-spacer>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
  <v-icon small class="mr-2" @click="editItem(item)"> edit </v-icon>
  <v-icon small @click="deleteItem(item)"> delete </v-icon>
</template>
<template v-slot:no-data>
  <v-btn color="primary" @click="initialize"> Reset </v-btn>
</template>

<script>
import axios from "axios";
export default {
data: () => ({
categories: [],
search: "",
dialog: false,
dialogDelete: false,
headers: [
  { text: "Actions", value: "actions", sortable: false},
  { text: "Name", value: "namecategory" },
  { text: "Description", value: "descategory", sortable: false },
  { text: "State", value: "numberstatate" , sortable: false},
],
desserts: [],
editedIndex: -1,
editedItem: {
  name: "",
  calories: 0,
  fat: 0,
  carbs: 0,
  protein: 0,
},
defaultItem: {
  name: "",
  calories: 0,
  fat: 0,
  carbs: 0,
  protein: 0,
},
}),

computed: {
formTitle() {
  return this.editedIndex === -1 ? "New Item" : "Edit Item";
},
},

watch: {
dialog(val) {
  val || this.close();
},
dialogDelete(val) {
  val || this.closeDelete();
},
},

created() {
this.initialize();
this.tolist();
},

methods: {
tolist() {
  let me = this;
  axios
    .get("api/categories/tolist/")
    .then(function (response) {
      me.categories = response.data;
      //console.log(response)
    })
    .catch(function (error) {
      console.log(error);
    });
},

initialize() {
  this.desserts = [
    {
      name: "Frozen Yogurt",
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
    },
    {
      name: "Ice cream sandwich",
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
    },
    {
      name: "Eclair",
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
    },
    {
      name: "Cupcake",
      calories: 305,
      fat: 3.7,
      carbs: 67,
      protein: 4.3,
    },
    {
      name: "Gingerbread",
      calories: 356,
      fat: 16.0,
      carbs: 49,
      protein: 3.9,
    },
    {
      name: "Jelly bean",
      calories: 375,
      fat: 0.0,
      carbs: 94,
      protein: 0.0,
    },
    {
      name: "Lollipop",
      calories: 392,
      fat: 0.2,
      carbs: 98,
      protein: 0,
    },
    {
      name: "Honeycomb",
      calories: 408,
      fat: 3.2,
      carbs: 87,
      protein: 6.5,
    },
    {
      name: "Donut",
      calories: 452,
      fat: 25.0,
      carbs: 51,
      protein: 4.9,
    },
    {
      name: "KitKat",
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7,
    },
  ];
},

editItem(item) {
  this.editedIndex = this.desserts.indexOf(item);
  this.editedItem = Object.assign({}, item);
  this.dialog = true;
},

deleteItem(item) {
  this.editedIndex = this.desserts.indexOf(item);
  this.editedItem = Object.assign({}, item);
  this.dialogDelete = true;
},

deleteItemConfirm() {
  this.desserts.splice(this.editedIndex, 1);
  this.closeDelete();
},

close() {
  this.dialog = false;
  this.$nextTick(() => {
    this.editedItem = Object.assign({}, this.defaultItem);
    this.editedIndex = -1;
  });
},

closeDelete() {
  this.dialogDelete = false;
  this.$nextTick(() => {
    this.editedItem = Object.assign({}, this.defaultItem);
    this.editedIndex = -1;
  });
},

save() {
  if (this.editedIndex > -1) {
    Object.assign(this.desserts[this.editedIndex], this.editedItem);
  } else {
    this.desserts.push(this.editedItem);
  }
  this.close();
},
},
};
</script>

我的观点是这样

enter image description here

Answer 1

我已经通过下面的方式解决了，在data-table

之后添加下一行

<template v-slot:item.numberstatate="{ item }">
  <span v-if="item.numberstatate" class="blue--text">Active</span>
  <span v-else class="red--text">insactive</span>
</template

所以如下：

<v-data-table
:headers="headers"
:items="categories"
sort-by="Name"
class="elevation-1"
:search="search"
>
<template v-slot:item.actions="{ item }">
  <v-icon small class="mr-2" @click="editItem(item)"> edit </v-icon>
  <v-icon small @click="deleteItem(item)"> delete </v-icon>
</template> ........

如何更改数据中的值-TABLE

HOW TO CHANGE VALUE IN DATA-TABLE

vuejs2

vuetify.js