使用 Vuetify 单击 v-btn 时无法执行方法

Question

点击v-btn时无法执行方法

我的模板

<template>
  <v-app>
    <v-main>
      <v-card class="mx-auto" max-width="500" tile>
        <v-text-field
          label="Main input"
          hide-details="auto"
          v-model="newTodo"
        ></v-text-field>
        <v-list disabled>
          <v-subheader>TODOS</v-subheader>
          <v-list-item-group v-model="todos" color="primary">
            <v-list-item v-for="todo in todos" v-bind:key="todo.id">
              <v-list-item-content>
                <v-list-item-title v-text="todo.text"></v-list-item-title>
              </v-list-item-content>
              <v-list-item-action>
                <v-btn color="blue-grey" class="white--text" v-on:click="test">
                  <v-icon dark>mdi-delete</v-icon>
                </v-btn>
              </v-list-item-action>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-card>
    </v-main>
  </v-app>
</template>

我的脚本

<script>
export default {
  name: "app",
  data: () => ({
    todos: [],
    newTodo: ""
  }),
  created() {
    this.reload();
  },
  methods: {
    reload() {
      let vm = this;
      const axios = require("axios").create({
        baseURL: "http://localhost:5000",
        headers: {
          "Content-Type": "application/json"
        },
        responseType: "json"
      });
      axios
        .get("/get_todos")
        .then(function(response) {
          // handle success
          console.log(response);
          vm.todos = response.data;
        })
        .catch(function(error) {
          // handle error
          console.log(error);
        })
        .finally(function() {
          // always executed
        });
    },
    test() {
      console.log("test");
    }
  }
};
</script>

我尝试过的

我将“v-on:click”替换为“@click”、“@onclick”和“@click.native”，但未能在控制台上看到“test”。

插件版本

Vue：v2.6.12
Vuetify：v2.3.16

Answer 1

正如 Michal Levý 所说，我尝试从 v-list 中删除 disabled 。我成功执行了测试方法。