😊

Vueでcomputed(算出プロパティ)がディレクティブでも使えるか?

2022/08/25に公開

Vue.jsの覚え書きです。
computedがマスタッシュ以外にもディレクティブでも使えるか分からなかったのでテストした結果です。

結論として使えます。

computedは算出プロパティというだけあって、dataで定義した変数と同様に使えるらしい。
「test1」という定義であれば、例えば「v-bind」であれば「v-bind:target="test1"」のようにして使用できる。

<template>
  <div id="app">
    <h1>computedのテスト</h1>

    <p>マスタッシュでのcomputedのテスト</p>
    <p>{{message}}</p>
    <p>ディレクティブでのcomputedのテスト</p>
    <a href="https://hoge.com/" v-bind:target="test1">リンク</a>

  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'test_ok'
    };
  },
  computed: {
    test1: function(){
     return this.message; 
    }
  }
};
</script>

Discussion