【Vue3×TypeScript】 v-onを埋め込んでみる

2023年2月26日

URLをコピーしました！

Vue3×TypeScriptでのv-onについて

メモ程度に残しておく。

script内の記述

const buy = (itemName: string) => {
  alert(itemName + '購入すんのかよ?');
}

こんな感じで、アロー関数を記述する。

そして、引数としてitemNameと記述する。TypeScriptなので、型の定義をした方がいい。ここでは、文字列となるのでStringと指定する。

template内の記述

<button @click="buy(itemName1)">購入</button>

ここで @click="buy(itemName1)"とすることクリックされたときに、script内で定義したアロー関数を呼び出すことができる。さらに、引数としてitemName1を指定しているので、Deskという文字を呼び出すことができるようになる。

最終的なソースコード

<script setup lang="ts">
const itemName1 = 'Desk'
const itemName2 = 'Bike'

const price1 = 30000
const price2 = 50000

const url1 = 'https://www.amazon.co.jp/Anker-Wireless-%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%AC%E3%82%B9%E5%85%85%E9%9B%BB%E5%99%A8-Watch%E3%83%9B%E3%83%AB%E3%83%80%E3%83%BC%E4%BB%98-USB%E6%80%A5%E9%80%9F%E5%85%85%E9%9B%BB%E5%99%A8%E4%BB%98%E5%B1%9E/dp/B09HBHDHWL/?_encoding=UTF8&pd_rd_w=sPVLu&pf_rd_p=09fc5329-add5-4943-82f6-96f98cfdada8&pf_rd_r=ARBBFSWTHCDAG33SD6AS&pd_rd_r=2dca66b0-bb15-42bf-8551-0ba834e182f9&pd_rd_wg=y1dHr&ref_=pd_gw_ci_mcx_mr_hp_atf_m'

const buy = (itemName: string) => {
  alert(itemName + '購入すんのかよ?');
}

</script>

<template>
<div class="container">
  <h1>最近の支出</h1>
  <div class="payment">
    <label>{{ itemName1 }}</label>
    <label>{{ price1 }} yen</label>
    <a v-bind:href="url1">ここで買いました</a>
    <button @click="buy(itemName1)">購入</button>
  </div>
  <div class="payment">
    <label>{{ itemName2 }}</label>
    <label>{{ price2 }} yen</label>
  </div>
</div>
</template>