はじめに
タイトル通り「v-forの中の要素でcomputedに引数を渡したい！」と思うことがありましたのでさくっとメモさせて頂きます。
ややサンプルコードが良くない？気がしますが、ご了承くださいませ
サンプルコード
Sample.vue
<template>
<ul>
<li
v-for="item in items"
:key="item.id">
{{ item.fruit }}:{{ taxPrice(item.price) }}円（税込）
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, fruit: 'りんご', price: 100 },
{ id: 2, fruit: 'みかん', price: 200 },
{ id: 3, fruit: 'ぶどう', price: 300 },
],
}
},
computed: {
taxPrice: function() {
// 関数の返り値に別の関数を定義し、別の関数内で引数を受け取ってあげる
return function(itemPrice) {
return Math.floor(itemPrice * 1.1)
}
}
},
}
コメントアウトにも書かせて頂きましたが、methodsのような記述で引数を受け取ろうとするとうまくいかないので、返り値を関数にして引数を受け取ることができます。
アロー関数式を使う
computed: {
taxPrice: () => (itemPrice) => Math.floor(itemPrice * 1.1)
},
また、ES6から利用できるようになったアロー関数式を使うとスッキリと記述することができます。
おわりに
見てくださった方ありがとうございます！
もし誤字・脱字等ありましたらご指摘頂けると嬉しいです
よろしくお願いいたします。