소개

이것은 Vue.js를 접하기 시작한지 ​​얼마 안되는 내가, 스스로 쓴 코드를 공식 문서를 참고로 수정한다고 하는 내용이 됩니다.
그래서 저와 같이 Vue.js를 만지기 시작한 분의 참고가 되시면 감사하겠습니다.

구체적인 내용

요 전날 Vue.js+firebase에서 SPA를 만들었는데, Vue를 배우기 시작해 며칠이었기 때문에 버튼 제어 부분에서 잘못된 구현을 해 버렸습니다.
그 때는 이것으로 괜찮아 끝났습니다만 ,.

동작 이미지

공식 가이드

이번 대상은 입력 폼에 아무것도 입력되어 있지 않은 경우에 버튼이 비활성이 되는 단순한 것입니다.

원래 코드

before.vue

<template>
  <div class="create">
    <div style="margin-right: 50px;text-align: right;">
      <header>NumG</header>
      <router-link to="/">Home</router-link>
    </div>
    <h1>Create</h1>
    <div>
      <p>
        <br />伝えたい言葉を入力してください。
        <br />※個人情報などは入力しないでください。
      </p>
    </div>
    <div>
      <form @submit="checkForm">
        <textarea cols="30" rows="5" :value="message" @input="doUpdate">いつもありがとう！
これからもよろしくね！</textarea>
      </form>
    </div>
    <div>
      <router-link
        id="confirmBtn"
        to="/Confirm"
        tag="button"
        class="btn btn-outline-primary"
      >Confirm</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Create",
  computed: {
    message() {
      return this.$store.getters.message;
    }
  },
  watch: {
    message: function() {
      let el = document.getElementById("confirmBtn");
      if (this.message.length) {
        el.removeAttribute("disabled", "disabled");
      } else {
        el.setAttribute("disabled", "disabled");
      }
    }
  },
  methods: {
    doUpdate(event) {
      this.$store.dispatch("doUpdate", event.target.value);
    },
    checkForm() {
      if (this.message) {
        return true;
      }
      this.error = null;
      if (!this.message) {
        this.error = "伝えたい言葉を入力してください";
      }
      event.preventDefault();
    }
  }
};
</script>

원래의 코드에서는 router-link(송신 버튼)에 속성 disabled를 붙이기 위해서 watch 를 사용해, message 그다지 Vue같지 않은 쓰는 법이구나라고 생각하면서도 그 밖에 쓰는 법을 모르고, 시간도 없기 때문에 스루 해 버렸습니다.
그건 그렇고, methods checkForm는 잊어 버린 불필요한 코드입니다. . .
위의 watch 덕분에 입력 값이 없을 때는 원래 버튼이 비활성이 되므로 버튼을 누르지 않고 이벤트가 발화하지 않습니다.

문서의 해당 부분

문서의 해당 부분은 부분입니다.
<button v-bind:disabled="isButtonDisabled">Button</button>isButtonDisabled 가 null , undefined , 또는 false 의 값을 가지는 경우, disabled 속성은 묘화 된 <button> 요소에 포함되지 않습니다.

즉, v-bind 를 사용하면 isButtonDisabled 의 속성을 자동으로 제어 (붙이거나 제외하거나) 할 수 있다는 것입니다.

수정된 코드

before.vue

<template>
  <div class="create">
    <div style="margin-right: 50px;text-align: right;">
      <header>NumG</header>
      <router-link to="/">Home</router-link>
    </div>
    <h1>Create</h1>
    <div>
      <p>
        <br />伝えたい言葉を入力してください。
        <br />※個人情報などは入力しないでください。
      </p>
    </div>
    <div>
      <form>
        <textarea cols="30" rows="5" :value="message" @input="doUpdate"></textarea>
      </form>
    </div>
    <div>
      <router-link
        to="/Confirm"
        tag="button"
        class="btn btn-outline-primary"
        :disabled="isButtonDisabled"
      >Confirm</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Create",
  computed: {
    message() {
      return this.$store.getters.message;
    },
    isButtonDisabled() {
      return this.$store.getters.message.length <= 0;
    }
  },
  methods: {
    doUpdate(event) {
      this.$store.dispatch("doUpdate", event.target.value);
    }
  }
};
</script>

다음과 같이 수정했습니다.
① computed 에 버튼 누름 여부를 판정하기 위한 계산 속성 isButtonDisabled() 를 추가
※입력치의 문자수가 0 이하의 경우에 true(누르기 불가)를 돌려주도록 되어 있습니다.
② router-link 에 :disabled="isButtonDisabled" 추가
※ 만약을 위해 보충입니다만 : 는 v-bind: 를 생략한 기법입니다.
② 불필요해졌다 watch 삭제
④기타 불필요한 부분의 삭제( form 의 @submit="checkForm"
수정 전과 비교하면 textareaの無駄な例 태그 안이 꽤 깔끔하고 Vue 같아졌다고 생각합니다!
특히 DOM의 요소를 직접 조작하는 처리가 사라진 것이 큰가라고 생각합니다.
※동작 자체는 수정 전과 다르지 않으므로 할애합니다.

요약

공식 문서는 제대로 눈을 통과하는 것이 좋다는 것을 알았기 때문에 시간을 만들어 한번 눈을 통과하고 싶습니다.
더 좋은 글이 있으면 댓글 주시면 감사하겠습니다.