First Vue app - Value of v-model not getting passed as variable to methods

My metalType variable continues to remain “undefined” and I believe it is a simple formatting issue that I am missing.

First Vue App, coded my first “Hello World” less than a year ago so I am still learning Javascript.

TIA and appreciate any assistance :slight_smile:

My goal:
// Take input data from user for metalType, waxWeight, and buttonSize
// Calculate metalType using formula:
// specificGravity * ((waxWeight * buttonSize) + waxWeight)

CodePen https://codepen.io/pandemicprogrammer/pen/GROWqwR?editors=0010


<div id='app'>

  <hr />
  <div v-if="isVisible" class="container">

    <!-- v-model assigns value from input to given variable (two-way data binding) -->

    <!-- WAX WEIGHT -->
    <input id="waxWeight" class="wax-weight" v-model="waxWeight" placeholder="Wax Weight" />
    <br>
    <br>

    <!-- METAL TYPE RADIO GROUP -->
    <section>
      <input name="radio" class="radio" type="radio" id="rRbutton1" v-model="metalType" value="silver">
      <label for="rButton1">Sterling Silver</label>
      <input name="radio" class="radio" type="radio" id="rButton6" v-model="metalType" value="bronze">
      <label for="rButton6">Bronze</label>
      <br>
      <input name="radio" class="radio" type="radio" id="rButton2" v-model="metalType" value="wGold14">
      <label for="rButton2">White Gold 14K</label>
      <input name="radio" class="radio" type="radio" id="rButton3" v-model="metalType" value="wGold18">
      <label for="rButton3">White Gold 18K</label>
      <br>
      <input name="radio" class="radio" type="radio" id="rButton4" v-model="metalType" value="yGold14">
      <label for="rButton4">Yellow Gold 14K</label>
      <input name="radio" class="radio" type="radio" id="rButton5" v-model="metalType" value="yGold18">
      <label for="rButton5">Yellow Gold 18K</label>
      <br>
    </section>
    <br>

    <!-- BUTTON SIZE -->
    <input id="buttonSize" class="button-size" v-model="buttonSize" placeholder="Button Size" />
    <br>
    <br>

    <!-- @keyup.enter is an event modifier -->
    <button @keyup.enter="calc(metalType, waxWeight, buttonSize)" @click="calc(waxWeight, buttonSize, metalType )">Calculate</button>

  </div>
</div>

import Vue from "https://cdn.skypack.dev/vue";

// Take input data from user for metalType, waxWeight, and buttonSize
// Calculate metalType using formula:
// specificGravity * ((waxWeight * buttonSize) + waxWeight)

createApp({
  // DATA
  data() {
    return {
      waxWeight: "",
      isVisible: true,
      buttonSize: "",
      specificGravity: "",
      metalType: ""
    };
  },

  // COMPONENTS
  components: {},

  // METHODS
  // `this` inside methods point to the current Vue instance

  methods: {
    calc: function (waxWeight, buttonSize, metalType) {
      const metals = [
        { type: "silver", specificGravity: 10.3 },
        { type: "wGold14", specificGravity: 12.1 },
        { type: "wGold18", specificGravity: 11.5 },
        { type: "yGold14", specificGravity: 13.6 }
      ];

      const specificGravity = metals.find(function (elem) {
        if (elem.type == metalType) {
          alert("test");
          return elem.specificGravity;
        }
      });
    }
  }
}).mount("#app");

Hello @pandemicprogrammer
I created a working example for v-model passed as variable to methods
Check out this link : v-model passed as variable to methods