Почему моя кнопка не меняет внутренний текст с помощью метода?

Question

Я пытался использовать метод, чтобы изменить внутренний текст кнопки «Изменить» на «Сохранить» после ее нажатия, но, похоже, это не работает. Мне нужна небольшая помощь.

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";
      }

Answer 1

Объявите локальную опору и сохраните там текст вместо того, чтобы пытаться перенаправить элемент для установки его опоры 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>