Question

我想使用多选组件并将其放入单个文件组件

<template>
  <v-select
    :items="maskItem.values"
    item-text="display"
    item-value="value"
    :label="maskItem.fieldTitle"
    multiple
    chips
    return-object
    @input="onSelectedItemsUpdated"
  ></v-select>
</template>

<script>
export default {
  props: {
    maskItem: {
      type: Object,
      required: true
    }
  },
  methods: {
    onSelectedItemsUpdated: function(newItems) {
      this.$emit("selectedItemsUpdated", newItems);
    }
  }
};
</script>

此组件应呈现特定数量的项目，并使用所有更新的值触发事件。当我传递这些值时

values: [
          {
            display: "Read",
            value: true
          },
          {
            display: "Write",
            value: false
          },
          {
            display: "Delete",
            value: false
          }
        ]

仅显示前两个项目。因此，我可以将“删除”放在“读取”之前，而“写入”将不会呈现。

我创建了一个示例来重现该问题

https://codesandbox.io/s/multiselect-hzu3z

Answer 1

那是因为您在两个对象中有重复的value（即“写”和“删除”中有false value）。

使value唯一（任意值，只要它们是唯一的）：

values: [
  {
    display: "Read",
    value: 1
  },
  {
    display: "Write",
    value: 2
  },
  {
    display: "Delete",
    value: 3
  }
]

请注意，本机选择也具有以下行为：
https://codepen.io/anon/pen/YoLxVr

Answer 2

如果您更改数据传递的方式，它将呈现：

public function __doRequest($request, $location, $action, $version, $one_way = 0)
{
    $xml = new DOMDocument();
    $xml->preserveWhiteSpace = false;
    $xml->formatOutput = true;
    $xml->loadXML($request);
    $request = $xml->saveXML();

    return parent::__doRequest($request, $location, $action, $version, $one_way);
}

多选组件：

return {
  maskItem: {
    items:["Read","Write","Delete"],
    values: [
      "Read"
    ],
    fieldTitle: "User permissions"
  }
};

Codepen

Answer 3

知道了，item-value实际上是您只看到2个项目的原因……我尝试将所有true都作为一个值，这次只渲染了一个…… item-value仅针对您拥有的每个值呈现一个元素（在您的情况下，您拥有true和false值，因此您将获得前两个具有这些值的项目）

==>您可以通过给值赋予不同的值来解决此问题，因为您没有使用v-model进行数据绑定：

values: [
      {
        display: "Delete",
        value: 'true1'
      },
      {
        display: "Read",
        value: 'false1'
      },
      {
        display: "Write",
        value: 'true2'
      }
    ]

codesandbox

多选仅渲染前两个项目

3 个答案: