Passing options containing blank spaces from Laravel blade to Vue multiselect

I’m trying to use Vue Multiselect in my Laravel blade file. I am putting the data in array and pass it in options as props. When option is one word(ex. “View”) everything is working. But when the option contains multiple words(ex. “View customer”) I am receiving the following error:

When I print the json array, the data is shown as it should:

In my blade file:

<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: [],
    };
  },

Any ideas what’s the problem and how can I fix it? Thank you

Answer

I solved the problem. In case somebody have the same issue, I just added double quotes

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

Advertisement

Answer