Vue

by moumensoliman

HTML

<div id="app">
  <form method="post">
     {{dataprice}}
     {{datavalue}}
    <select @change="onChange" id="option" class="form-control 
                   sectionprice" required="" name="option">
      <option disabled="disabled" value="">Select Option</option>
      <option data-type="Option" data-value="Mac Pro 128 GB" data-price="915.56">Mac Pro 128 GB</option>
      <option data-type="Option" data-value="Mac Pro 254 GB" data-price="1300">Mac Pro 254 GB</option>
    </select>
    <input name="realprice" type="hidden" :value="dataprice" />
  </form>
</div>

Vue

new Vue({
  el: "#app",
      data: {
        dataprice: '',
        datavalue: ''
      },
      methods: {
        onChange(e) {
          if (e.target.options.selectedIndex > -1) {
            const theTarget = e.target.options[e.target.options.selectedIndex].dataset;
            this.dataprice = theTarget.price
            this.datavalue = theTarget.value
          }
        }
      }
})