每行加载 v-data-table 按钮答案

【问题标题】：v-data-table button loading per row每行加载 v-data-table 按钮
【发布时间】：2022-01-16 00:28:04
【问题描述】：

将 vue v2.5 与 vueCLI 3 一起使用，尝试在每行都有一个按钮的 v-data-table，当单击此按钮时，应使其显示为正在加载。

v-btn默认有loading属性，真的不知道为什么不行……

    <v-data-table
      :headers="headers"
      :items="records"
      @dblclick:row="editRowCron_jobs">
      <template v-slot:[`item.actions`]="props">
        <v-btn color="blue-grey" :loading="props.item.createloading" fab dark small @click="ManuralRun(props.item)">
          <v-icon dark>mdi-google-play</v-icon>
        </v-btn>
      </template>
    </v-data-table>

在点击方法上，我可以读取但不能设置项目

export default {
  data() {
    return {
      headers: [
           { text: "id", value: "id", align: " d-none" }, 
           { text: "actions", value: "actions" }
        ],
        records: [] //grid rows filled by API
      }
    },
    methods: {
         ManuralRun(item){
           this.records[2].createloading=true; //even I set it like that, nothing happens
           item.createloading = true;          //property changed here - ok
           console.log(item);                  //here outputs the clicked item - ok
        },

【问题讨论】：

标签： node.js vue.js

【解决方案1】：

所以，根据this

该属性必须预先存在于数组中，这意味着，当我们从 API 获取结果时，我们必须将属性添加为：

this.records = data.data.map(record => {
    return {
        createloading: false, 
        ...record
    }
})

【讨论】：