时间戳

首页 > 解决方案 > 如何以编程方式更改 v-btn 的内容？

vue.js - 如何以编程方式更改 v-btn 的内容？

问题描述

在带有Vuetify的Vue项目中，有一个带有标签“点击我”的按钮，我想要的是当点击按钮时，它的标签更改为“点击”。

我试过了，但按钮是空白的。

export default {
  methods: {
    submit() {
    // How shoud I do?
    }
  }
}
<v-btn @click="submit">click me</v-btn>

标签： vue.js

解决方案

您所要做的就是将标签的内容保存在您的组件数据中，并在您的提交方法中更改此属性。然后只需更改您的模板以使用此数据而不是像这样的静态标签：

您的组件： 

export default {
  data () {
    return {
      label: 'Click me'
    }
  },
  methods: {
    submit() {
      this.label = 'Something else'
    }
  }
}

您的模板：

<v-btn @click="submit">{{ label }}</v-btn>

我强烈建议您阅读官方 vue 教程，因为所有这些都包含在第一段中。

推荐阅读