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

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

我的模板

待办事项
mdi删除

我的剧本

导出默认值{
名称：“应用程序”，
数据：（）=>({
待办事项：[]，
纽托多：“
}),
创建（）{
这个。重载（）；
},
方法：{
重新加载（）{
让vm=这个；
const axios=require（“axios”）。创建({
基本URL:“http://localhost:5000",
标题：{
“内容类型”：“应用程序/json”
},
响应类型：“json”
});
axios
.get（“/get\u todos”）
.然后（功能（响应）{
//成功
控制台日志（响应）；
vm.todos=response.data；
})
.catch（函数（错误）{
//处理错误
console.log（错误）；
})
.最后（函数（）{
//总是执行
});
},
测试（）{
控制台日志（“测试”）；
}
}
};

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

插件版本 Vue:v2.6.12

---

Vuetify:v2.3.16

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

您是否尝试从

v-list

中删除

disabled

？@MichalLevý我刚刚尝试删除disabled，并成功地在控制台上显示“test”！谢谢你的评论。

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