Vue.js - 选择的反应性，其值为所选对象而不是其 id

Question

我正在使用vue.js 2.3 和element-ui。我正面临一个选择下拉列表的反应性问题，其值为item 选择。

问题

select 不会自动填充初始对象value

注意事项

如果我将:value="item" 更改为:value="item.name"

和form: {option: {name:'blue', price: ''}} 到form: {option:'blue'}

它正在工作

问题

当select dropdown 的值不只是string 或id 而是整个被选中的对象时，有没有办法让select dropdown 完全响应

https://jsfiddle.net/LeoCoco/aqduobop/

<

div style='margin-bottom:50px;'>
My form object : 
  {{form}}
</div>

  <el-button @click="autoFill">Auto fill</el-button>

  <el-select v-model="form.option" placeholder="Select">
    <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item">
    </el-option>
  </el-select>
</div>


    var Main = {
    data() {
      const options = [
     {name: 'blue', price: '100$'},{name: 'red', price: '150$'},
      ]

      return {
        currentItem: 0,
        options,
        form: {
            option: {name:'', price: ''},
        },
         testForm: {
            option:{name:'red', price: '150$'}
        },
      }
    },
    methods: {
      autoFill() {
        this.form =  Object.assign({}, this.testForm); // -> Does not work
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Answer 1

您的问题是，当所选值是一个对象时，form.option需要是相同的 em>对象，以便在选择列表中选择它。

例如，如果我将小提琴代码更改为 this，我认为它会按照您的预期工作。

var Main = {
    data() {
      const options = {
        'color': [{name: 'blue', price: '100$'},{name: 'red', price: '150$'}],
        'engine': [{name: '300hp', price: '700$'},{name: '600hp', price: '2000$'}],
      }
      let currentCategory = 'color'

      return {
        currentCategory,
        currentItem: 0,
        options,
        form: {
            option: options[currentCategory][0]
        },
         testForm: {
            option:{name:'blue', price: '100$'}
        },
      }
    },
    methods: {
      autoFill() {
        this.form =  Object.assign({}, this.testForm); // -> Does not work
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

这是你的小提琴updated。

您说您的值来自 ajax 调用。这意味着当您设置form.option 时，您需要将其设置为options[currentCategory] 中的对象之一。