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

我想知道如何使用Vue js设置表单选择的数据属性。 这是选择

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

选择选项
Mac Pro 128 GB Mac Pro 254 GB
var imagesection=新的Vue({
el:“#价格部分”，
数据：{
数据价格：''；
},
方法：{
onChange（）{
this.dataprice=this.dataset.price
},
}
})

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

---

伙计们，如果有人帮我，我会很感激的

我已经为您更新了它，您将使用

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

{{dataprice}}
{{datavalue}}
选择选项
Mac Pro 128 GB
Mac Pro 254 GB
新Vue({
el:“价格部分”，
数据：{
数据价格：''，
数据值：“”
},
方法：{
onChange（e）{
如果（e.target.options.selectedIndex>-1）{
const theTarget=e.target.options[e.target.options.selectedIndex].dataset；
this.dataprice=目标价格
this.datavalue=target.value
}
}
}
})

我已经创建了，我认为您使用了错误的

id

，因为这里的工作是检查fiddle链接，我已经用您的元素id

el再次更新了答案：“#pricesection”，

Bravo！！它现在工作正常。非常感谢你。如果我可以问的话，我对了解目标关键字中的内容很感兴趣。例如，e.target.options，是否有e.target.value或e.target.attr等内容。我想了解更多信息。任何参考资料，我都会感谢你的欢迎，这个好问题，我希望这对你有用，我想这是同样的问题