Fetch html data attribute with Vue js onchange
I've updated it for you, you will use @change with event to get the selected target,
<div id="pricesection"><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><script>new Vue({ el: "#pricesection", 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 } } }})</script>