Kawamas vue sfc

kawamas.vue

<script setup>

  let kawaPrice = $ref(34)
  let kawaSize = $ref(1.2)
  
  let sixPrice = $ref(55)
  let lataSize = $ref(.355)
  const sixSize = $computed(() => lataSize * 6)
  
  const kawaUnitPrice = $computed(() => kawaPrice / kawaSize)
  const sixUnitPrice = $computed(() => sixPrice / sixSize)
  
  function money(num) {
    let n = parseInt(num).toString()
    const dec = parseInt(num * 100).toString().slice(-2)
    let parts = []
    do {
      parts = [n.slice(-3),...parts]
      n = n.slice(0,-3)
    } while (n.length)
    return `$${parts.join(",")}.${dec}`
  }
  
  const wupMoney = $computed(() => money(kawaUnitPrice))
  const supMoney = $computed(() => money(sixUnitPrice))
  
  const psskNum = $computed(() => kawaUnitPrice * sixSize)
  const pssk = $computed(() => money(psskNum))
  
  const pkssNum = $computed(() => sixUnitPrice  * kawaSize)
  const pkss = $computed(() => money(pkssNum))
  
</script>

<template>
  
  <table border=1>
    <tr>
      <td></td>
      <th>Price ($)</th>
      <th>Size (L)</th>
    	<th>Unit Price ($/L)</th>
    </tr>
    <tr>
      <th>kawama</th>
      <td><input v-model="kawaPrice" type="number" step="1"></td>
      <td><input v-model="kawaSize" type="number" step="0.01"></td>
      <td>{{ wupMoney }}</td>
  	</tr>
    <tr>
      <th>six</th>
      <td><input v-model="sixPrice" type="number" step="1"></td>
      <td><input v-model="sixSize" type="number" step="0.01"></td>
      <td>{{ supMoney }}</td>
  	</tr>
  </table>
  
  <p>
  precio de kawama según six:
  {{ pkss }}  
  </p>
  
  <p>
  precio de six según kawama:
  {{ pssk }}  
  </p>
  
</template>