Element: select remote 远端搜索如何设置默认值？

[leegoway]

ElementUI version

1.0.0-rc.7

OS/Browers version

macOS/Chrome 53

Vue version

2.0.3

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

select组件remote模式，如何设置默认值？
场景是：业务对象A有个属性B，属性B是个下拉列表选择的值。当编辑此业务对象时，需要在下拉列表中默认设置属性B的值。现在设置了没有效果

[Leopoldthecoder]

rc.8 修复了这个问题，升级试一下。

[leegoway]

升级到rc.8了，还是显示不出来，问题描述如下，先看代码：

<template>
  <el-select v-model="operation.moduleId" filterable remote placeholder="输入关键字搜索Vela的模块" :remote-method="searchVela" :loading="loadingVela" @change="changeModule">
      <el-option v-for="module in modules" :key="module.id" :label="module.name" :value="module.id">
      </el-option>
    </el-select>
</template>
<script>
export default {
  name: 'opman',
  data () {
    return {
      operation: {
        id: '',
        moduleId: ''
      },
      modules: [],
      loadingVela: false
    }
  },
  methods: {
    searchVela: function() {

    },
    changeModule: function(value) {
      console.log('changeModule');
      console.log(value);
    }
  },
  mounted() {
    this.$http.get('http://autops.corp.elong.com:8888/operations/18').then((response) => {
      //初始化当前operation
      this.operation = response.body.data;//设置operation对象的属性moduleId

      this.$http.get('http://autops.corp.elong.com:8888/sag/module?moduleId='+this.operation.moduleId).then((response) => {
        this.modules.push({id: response.body.data.id, name: response.body.data.name});
        console.info('debug inside:', this.operation.moduleId);
      }, (response) => {

      });
      console.log('debug out:', this.operation.moduleId);
    }, (response) => {

    });
    console.log('debug out out');
  }
}
</script>

控制台输出是：
debug out out
debug out 8
changeModule
undefined
debug inside: undefined

没有显示默认值，想知道如何解决？

[Leopoldthecoder]

由 console.info('debug inside:', this.operation.moduleId); 的执行结果看出 this.operation.moduleId 是 undefined，即此时 el-select 绑定的 v-model 是 undefined，所以没有显示。

应该是因为 this.modules 赋值在 this.operation 之后。顺序调换一下。

[leegoway]

所以问题来了，console.info('debug inside:', this.operation.moduleId); 执行时this.operation.moduleId为何变成undefined？ （我好像没设置过这个属性值了）

[Leopoldthecoder]

我编辑了一下，你看看。

[leegoway]

看现在代码，就是先赋值this.operation，再赋值this.modules。

[Leopoldthecoder]

对，调换一下，先赋值 this.modules，再赋值 this.operation。

[leegoway]

的确可以，非常感谢。
select有默认值了，但click的时候默认值就没了，鼠标再blur就有了，是这样设计的吗？我的感觉上应该是click的时候，就按照当前选中值进行搜索，显示下拉框。

[Leopoldthecoder]

就是 #784 那个问题吧？如果是的话我先把这个 issue 关掉了，后续在 #784 里反馈。

[leegoway]

好的，非常感谢，我的错

[mymickey]

默认值只能显示id吗？

[Leopoldthecoder]

@mymickey 请提供 demo

[fly2017313]

@mymickey 请提供 demo
使用场景是 表单的编辑页面。
关键代码如下：
1、模版内容
<el-form-item label="所属总代" > <el-select v-model="form.agentInfo.parentAgent" filterable remote reserve-keyword clearable placeholder="请输入关键词" :remote-method="remoteMethod" :loading="partnerLoading"> <el-option v-for="v in partnerOptions" :key="v.id" :label="v.value" :value="v.id" ></el-option> </el-select> </el-form-item>

2、获取到的初始值
let d = { id: 251, name: "用户显示的文本内容" }; //初始化从接口中获取的值，准备当作输入框的默认值展示

如果直接修改 form.agentInfo.parentAgent = d.id 提交的时候是id，但显示的也是id
如果直接修改 form.agentInfo.parentAgent = d.name 显示的就是name，但提交的时候确也是name了。
我指定el内部使用的是value当作显示内容，那么即使我把我的name改成value，也是不行的吧。

请问，如果用户不重新修改这个值，就提交表单，怎么让 输入框里显示的文本内容是name，但同时提交的时候又是初始的id？

[fly2017313]

@mymickey 请提供 demo
使用场景是 表单的编辑页面。
关键代码如下：
1、模版内容
<el-form-item label="所属总代" > <el-select v-model="form.agentInfo.parentAgent" filterable remote reserve-keyword clearable placeholder="请输入关键词" :remote-method="remoteMethod" :loading="partnerLoading"> <el-option v-for="v in partnerOptions" :key="v.id" :label="v.value" :value="v.id" ></el-option> </el-select> </el-form-item>

2、获取到的初始值
let d = { id: 251, name: "用户显示的文本内容" }; //初始化从接口中获取的值，准备当作输入框的默认值展示

如果直接修改 form.agentInfo.parentAgent = d.id 提交的时候是id，但显示的也是id
如果直接修改 form.agentInfo.parentAgent = d.name 显示的就是name，但提交的时候确也是name了。
我指定el内部使用的是value当作显示内容，那么即使我把我的name改成value，也是不行的吧。

请问，如果用户不重新修改这个值，就提交表单，怎么让 输入框里显示的文本内容是name，但同时提交的时候又是初始的id？

问题提在了这里：https://github.com/ElemeFE/element/issues/13350