CODEWITHSUNDEEP
phplaravelvue.jsvue-component
Jounior Developer
Jounior Developer

Reputation: 155

The value for a v-bind expression cannot be empty. Found in "v-bind:items"

I am new to Vue. I am using a vue component as follows & I am passing some objects through the components if available.

<form :languages='{{ json_encode($languages) }}'
      :items='{{ !empty($items) ? $items : "" }}'>
</form>

I am using this vue component for both create new entry and edit existing entry scenarios. so, this :items (it is and list of objects) only have values if it is using edit function. but if it is create new function it don't have this :items. when I am using this vue component for the add new function it gives me the following error and not loading the vue component.

Error message:

The value for a v-bind expression cannot be empty. Found in "v-bind:items".

I want to load this vue component for both scenarios I already mentioned(create new & edit functions), so is there any way to achieve it?

Upvotes: 0

Views: 1487

Answers (1)

tony19
tony19

Reputation: 138296

v-bind doesn't allow empty binding-expression values, which would happen if empty($items) evaluates to true.

You could set it to an empty array for that case:

<form :items='{{ !empty($items) ? $items : "[]" }}'>
                                            👆

Upvotes: 2

Related Questions