LoginSignup
3

More than 3 years have passed since last update.

Vue.jsのcomputedプロパティで引数を受け取る

Last updated at Posted at 2020-07-11

そもそも引数とは

プログラムや関数に渡す値のこと。値を渡すことによってその値によってif文を書いたり必要な情報をプログラム内で使用することができる。最初のうちは引数を利用することは結構少ないかも。

HTMLからScriptに引数を渡す

method内での引数の渡し方

ブラウザに設置されたボタンをクリックしたらeventっていう関数が実行される文を書きました。引数には文字列を含ませてあります。

html
<template>
  <div>
    <button @click="event('引数だよ!')">
    </button>
  </div>
</template>

文字列の引数にvalueという名前で引数の情報を受け取ります。
ちゃんと受け取れていればvalueの中には引数だよ!っていう文字列が入っているはずです。

vue.js
<script>
export default {
  methods: {
    event (value) {
      console.log(value)
    }
  }
}
</script>

スクリーンショット 2020-07-12 1.31.07.png

ボタンを押した時の結果です。ちゃんと文字列が受け取れています。

computedプロパティないで引数を受け取る方法

methodsの時とおなじ要領でcomputed内で引数を受け取ろうとすると次の様な値が返ってきます。
この値も必要になるときは来るのですが、現段階で欲しい情報は文字列です。
スクリーンショット 2020-07-12 1.37.10.png

じゃあどうするか

computed内に記載した関数の返り値に別の関数を定義し別の関数内で引数を受け取ることによって欲しい情報を取得することができます。

vue.js
<script>
export default {
  computed: {
    event () {
      return function (value) {
        return console.log(value)
      }
    }
  }
}
</script>

スクリーンショット 2020-07-12 1.42.25.png

この様にしてcomputed内でも欲しい引数を取得することができました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3