0

如何仅从 vuetify 表中获取字段以在 axios 中发布，我有一个表，如以下代码所示

 <div id="app">
      <v-app id="inspire">
        <v-card>
          <v-card-title>
            <v-text-field
              v-model="search"
              append-icon="mdi-magnify"
              label="Search"
              single-line
              hide-details
            ></v-text-field>
          </v-card-title>
          <v-data-table
            :headers="headers"
            :items="students"
            :search="search"
          >
            <template  v-slot:item.status="{ item }">
              <v-btn v-if="item.status" @click="add(item)">Add</v-btn>
              
              <v-btn v-else disabled>Temporarily no access</v-btn>   
            </template>
            
          </v-data-table>
        </v-card>
      </v-app>
    </div>

从脚本我有以下代码

 const app = new Vue({
   el: '#app',
   vuetify: new Vuetify(),    
   data() {
         return {
           search: '',
           headers: [
             { text: 'Number list', align: 'start', value: 'id'},
             { text: 'Name', align: 'start', value: 'name'},
             { text: 'Options', value: 'status' }
           ],
           students: [
        {
          id: 1,
          name: pedro,
          status: activo,
        },
        {
          id: 2,
          name: juan,
          status: activo,
        },
        {
          id: 3,
          name: jose,
          status: activo,
        },
       ]
         };
       },
    methods: {
        add (item) {
        axios.post('http://localhost/list?id=' + item.id)
          .then(response => {
            this.response = response
        }).catch(e => {
          console.log(e)
        });
      },
    
    }
 });

我想要做的是，当它被点击时，我只用 axios 发送每个帖子的 id 但是当我点击它时，我在控制台中收到一个错误，说项目未定义，这是我的主要错误，你可以看到我需要首先验证学生的状态是否处于活动状态。下面我还添加了生成表的图像以供进一步参考。

表参考

编辑

我忘了放

 @click="add(item)"

但仍然不起作用，即使控制台有问题，也不再出现错误

4

1 回答 1

3

尝试：

 <v-btn v-if="item.estado" @click="add(item)">Add</v-btn>

尝试 2：首先item通过添加以下行检查是否正确通过。也许这将有助于追查问题

     <template v-slot:item.status="{ item }">
              <p>Debug item text: {{item}}</p>
              <v-btn v-if="item.status" @click="add(item)">Add</v-btn>
              
              <v-btn v-else disabled>Temporarily no access</v-btn>   
            </template>
于 2021-12-02T18:11:27.843 回答