将包含空格的选项从 Laravel 刀片传递到 Vue 多选

Question

我正在尝试在我的 Laravel 刀片文件中使用 Vue Multiselect。我将数据放入数组中并将其作为道具传递给选项。 When option is one word(ex. "View") everything is working.但是当该选项包含多个单词（例如“查看客户”）时，我收到以下错误：

当我打印 json 数组时，数据会按原样显示：

在我的刀片文件中：

<grouped-select :options={{json_encode($allOptions)}}></grouped-select>

Vue 分组多选：

<template>
  <div>
    <multiselect
      v-model="value"
      :options="options"
      :multiple="true"
      group-values="libs"
      group-label="language"
      :group-select="true"
      placeholder="Click to select"
      track-by="name"
      label="name"
      ><span slot="noResult"
        >Oops! No elements found. Consider changing the search query.</span
      ></multiselect
    >
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";

export default {
  props: [JSON.parse("options")],
  components: {
    Multiselect,
  },
  data() {
    return {
      value: [],
    };
  },

任何想法是什么问题，我该如何解决？谢谢

Answer 1

我解决了这个问题。如果有人有同样的问题，我只是添加了双引号

<grouped-select :options="{{json_encode($allOptions)}}"></grouped-select>