Fetch html data attribute with Vue js onchange

Question

I would like to know how I can the data attribute of form select using Vue js. Here is the select

   <form method="post">
            <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>
<script>
    var imagesection = new Vue({
        el: '#pricesection',
        data: {
            dataprice:'';
        },
        methods:{
        onChange(){
                this.dataprice = this.dataset.price
        },
        }

    })

</script>

What I am trying to achieve here is when an option is selected, using the @change, I can get the data-price of the selected option. Then the value of the hidden input field which is realprice will be updated with the data-price value.

Guys I will appreciate if someone help me out.

Moumen Soliman · Accepted Answer · 2018-12-05T12:20:51.607

5

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>

edited Dec 05 '18 at 12:20

answered Dec 05 '18 at 10:26

Moumen Soliman

1,664
1
14
19

I've created [jsfiddle](https://jsfiddle.net/moumensoliman/eywraw8t/491639/), I think you're using wrong `id` because this working here check fiddle link – Moumen Soliman Dec 05 '18 at 12:16
I've updated answer again with your element id `el: "#pricesection",` – Moumen Soliman Dec 05 '18 at 12:22
1

Bravo!! It is working correctly now. Thank you so much. If I may ask, I am interested in knowing things within target keywords. For example, the e.target.options, is there anything like e.target.value or e.target.attr, etc. I want to learn more. Any reference, I will appreciate – Prince Dec 05 '18 at 12:49
Thank you u are welcome, This nice question, I hope this [Link](https://stackoverflow.com/questions/7723188/what-properties-can-i-use-with-event-target) useful for you, I think it's the same question – Moumen Soliman Dec 05 '18 at 12:56

Fetch html data attribute with Vue js onchange

1 Answers1