Help us understand the problem. What is going on with this article?

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

そもそも引数とは

プログラムや関数に渡す値のこと。値を渡すことによってその値によって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内でも欲しい引数を取得することができました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away