时间戳

首页 > 解决方案 > 为什么我的按钮不使用方法更改内部文本？

javascript - 为什么我的按钮不使用方法更改内部文本？

问题描述

我尝试使用一种方法，在单击编辑按钮后将其内部文本更改为保存，但它似乎不起作用。我需要一点帮助。

b-button.editbtn.d-flex.flex-row.mb-3(@click="editBlood")
                    p.mb-0.text-white.p-1#editbtns Edit

editBlood() {
      this.edit = !this.edit
      if(this.edit == !this.edit) {
        document.getElementById('editbtns').text = "Save";
      }
      else {
        document.getElementById('editbtns').text = "Edit";
      }

标签： javascriptvue.jsvuejs2pug

解决方案

声明一个本地道具并将文本存储在那里，而不是尝试重新定位元素以设置其 innerText 道具。

<template> 
 <button @click="editBlood">{{ text }}</button>
</template> 

<script>
var app = new Vue({
  el: '#app',
  data: {
    button: {
      text: 'My button text'
    },
  },
  methods: {
    editBlood: function() {
      this.button.text = "new text!";
    },
  }
</script>

推荐阅读