使用 Vue js onchange 获取 html 数据属性

Question

我想知道如何使用 Vue js 获取表单 select 的数据属性。这是 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>

我在这里试图实现的是当一个选项被 selected 时，使用 @change，我可以获得 selected 选项的数据价格。然后隐藏输入字段的值 realprice 将用数据价格值更新。

伙计们，如果有人帮助我，我将不胜感激。

Answer 1

我已经为您更新了，您将使用 @change 和事件来获取选定的目标，

<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>

使用 Vue js onchange 获取 html 数据属性

Fetch html data attribute with Vue js onchange

html

javascript

dataset

custom-data-attribute

vue.js