带有选择选项的 vuejs2 获取值和其他属性答案

【问题标题】：vuejs2 with select option get the value and other attribute带有选择选项的 vuejs2 获取值和其他属性
【发布时间】：2020-05-19 10:16:57
【问题描述】：

我正在使用 vuejs。假设我有选择并且在里面我有多个选项像这样：

<select  v-model='line.unit' name='unit[]' required @change='change_unit($event)'>
    <option v-for='(unit) in line.units' price='line.price' :value='unit.id'>@{{unit['get_unit_id']['name']}}</option>
    <option selected class='selected' price='line.price' v-if='line.smallest_unit' :value='line.smallest_unit.id'>@{{line.smallest_unit['name']}}</option>
</select>

这就是 change_unit 方法：

change_unit:function($event)
{

}

如果我想要所选选项的值，如何访问属性price？我可以这样得到它..

console.log(event.target.value);

但是现在我可以访问价格值属性了吗？

【问题讨论】：

你已经看过观察者了吗：vuejs.org/v2/guide/computed.html#Watchers？
不是观察者我想要的是获取自定义属性值
一个可能有帮助的组件，vue-select.org我个人经常使用它。
能否请您发布您的data { ... }的示例

标签： javascript html vue.js vuejs2

【解决方案1】：

您可以调整选项 value 将其绑定到 Vue.js
正如您在this fiddle 中看到的那样，我将在这里解释

考虑一下这个 HTML

<div id="app">
  <select v-model="line.unit" name='unit[]' required>
      <option v-for='(unit) in line.units' :value="unit">
            {{unit.name}}
        </option>
  </select>

  <h2 v-if="line.unit">
     {{line.unit.price}}
  </h2>
</div>

如您所见，我将<option> 值绑定到unit，这是每个单独的line.units 项目对象。通过这样做，选择一个选项实际上会将v-model 设置为unit，而不是对象的属性

考虑一下这个 JS，我在其中创建了您的 .data 的假设复制品。

new Vue({
    el: '#app',
    data() {
      return {
        line: {
          unit: {},
          units: [{
            id: 1,
            price: 100,
            name: 'foo'
          },{
            id: 2,
            price: 200,
            name: 'bar'
          }]
        }
      }
    }
  })

现在选择一个选项会显示它的价格（我放了一个<h2> 作为演示）

【讨论】：