💨

Vue method内でcomputedが使えるかのテスト

2022/08/25に公開

Vue.jsの覚え書きです。
method内でcomputedで定義したプロパティが使えるか分からなかったのでテストした結果です。

結論として使えます。

computedは算出プロパティというだけあって、dataで定義した変数と同様に使えるらしい。
「test1」という定義であれば、「this.test1」 とすることでmethod内でも使えることが分かった。

<template>
  <div id="app">
    <h1>method内でcomputedが使えるかのテスト</h1>

    <button v-on:click="doSomething">実行</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "使えます"
    };
  },
  methods: {
    doSomething: function () {
      alert( this.test1 );
    }
  },
  computed: {
    test1: function () {
      return this.message;
    }
  }
};
</script>

Discussion