表示在标记中没有显示文本的值

Question

我已经阅读了所有的问题，但仍然无法理解为什么我没有收到任何短信在我的标签。

对象的值使用一个和一个对象。当我关闭对话框并重新打开它时，我的所有数据都会从后端获取并加载到组件中。只是我的多重选择中的标签没有显示文本。他们有正确的钥匙，当我检查他们在vue devtools，但他们只是出现空。

这是我的代码：

<el-select
 v-model="defaultFilter.val"
 value-key="value"
 multiple
 size="mini"
 filterable
 remote
 :placeholder="'Aktiv-/Passivfilter Wert für ' + obj.label"
 :remote-method="remoteMethod"
 :loading="configOptions.loading"
>
 <el-option-group v-for="group in configOptions.options" :key="group.label" :label="group.label">
   <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item">
      <span style="float: left">{{ item.label }}</span>
      <span v-if="item.description" style="padding-left: 5px; color: #8492a6; font-size: 9px">{{
                              item.description
                            }}</span>
    </el-option>
  </el-option-group>
</el-select>

我已经阅读了文档，只是不明白我在这里做错了什么。我在el-选项中传递给值的项如下所示：

{
 description: "ABC",
 filterProp: "abc",
 label: "A B C",
 value: "ABC"
}

在选择内的标记中，我要显示值文本。我是不是漏掉了一些配置或设置？

我正在使用"element-ui": "^2.13.2",和"vue": "2.6.10",

非常感谢帮助或指向正确方向的指针。

Answer 1

问题不在于您共享的代码。您的方法或数据可能有问题。我猜是因为你没有分享完整的代码。

如果您使用数据跟踪他们的文档，那么您可能会陷入困境，因为您有对象数组，而它们有字符串数组。这是他们的榜样的一部分，您需要的是item.value和item.label，而不是item。

mounted() {
  this.list = this.states.map(item => {
    // here you need item.value and item.label
    return { value: `value:${item}`, label: `label:${item}` };
  });
}

但是这只是一个例子，在这里您可能从API获得数据，所以您需要检查数据是如何构造的。

下面是使用数据/pen/GRxMQQN的完整示例