将包含空格的选项从 Laravel blade 传递给 Vue 多选

Question

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

当我打印 json 数组时，数据按应有的方式显示：

在我的 blade 文件中：

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

Vue grouped-multiselect:

<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>

将包含空格的选项从 Laravel blade 传递给 Vue 多选

Passing options containing blank spaces from Laravel blade to Vue multiselect

php

json

laravel

vue.js

multi-select