開発ブログ

株式会社Nextatのスタッフがお送りする技術コラムメインのブログ。

電話でのお問合わせ 075-744-6842 ([月]-[金] 10:00〜17:00)

  1. top >
  2. 開発ブログ >
  3. Javascript >
  4. vuejs >
  5. 【Vue.js】computedに引数を渡す方法

【Vue.js】computedに引数を渡す方法

こんにちは。
ニシザワです。

今回はVueJsの記事を書きます。 Vue.jsには算出プロパティと言われる、便利なキャッシュされるmethodのようなものがあります。
methodなのに簡単には引数を取れなくなっているので、今回はそちらをご説明します。
特に、v-forのループ処理に便利ですのでよければ参考にしてください。
では実際のコードを見ていきましょう。

<li v-for="(item,key) in items">

    <td><a :href="'/hoge/' + key" :disabled="canLink(key)">リンク</a></td>

</li>
上記のように値が入ってきたときだけ、リンクが押せるようにするというコードがあったとすると

computed : {
    canLink: function () {
        self = this;
        return function (key) {
            if(self.hoge.hasOwnProperty([key])){
                return true;
            }
            return false;
        };
    }
},
上記のようにすれば、computedにも引数が渡すことがきます。 methodでもいいのですが、高速なcomputedを使うのも一つの手ですのでよければ試してください。
TOPに戻る