Question

我有一个包含来自axios请求的响应数据的下拉列表

<multiselect v-model="order.orderJCname" id="orderJCname" name="orderJCname" :options="orderRCnameoptions" label="nicename"></multiselect>

在选择我的响应对象的记录时，我想用所选对象的额外数据填充三个附加表单元素？

 <div class="row">
   <label class="col-sm-12" for="orderACjobtitle">Job Title</label>
       <div class="col-sm-12">
          <input v-model="orderRCnameoptions.job_title" v-bind="orderRCnameoptions.job_title" name="orderACjobtitle" type="text" disabled class="form-control" id="orderACjobtitle"/>
   </div>
  </div>

我尝试过V-Bind，但不确定我是否在正确的球场

Answer 1

首先，我要使用vue-multiselect的select event：

<multiselect v-model="order.orderJCname" id="orderJCname" name="orderJCname" :options="orderRCnameoptions" label="nicename" @select="onSelect"></multiselect>

然后在你的vue组件中创建相应的方法，该方法存储所选的值：

methods: {
    onSelect(selectedOption, id) {
        this.selectedOption = selectedOption;
    }
}

最后一部分是你提到的那3个文本框的绑定。所有这些都应该引用相同的数据字段：

<input type="text" name="text1" v-model="selectedOption.key1" />
<input type="text" name="text2" v-model="selectedOption.key2" />
<input type="text" name="text3" v-model="selectedOption.key3" />

干杯！

使用下拉选择的数据Vue js

1 个答案: