Level 15
I found the problem: I was paginating the replies on the PHP end...
1 like
Jul 13, 2020
4
Level 15
VueJS - Error compiling template: The value for a v-bind expression cannot be empty. Found in "v-bind:data"
Hi everyone,
I've got a strange error:
[Vue warn]: Error compiling template:
The value for a v-bind expression cannot be empty. Found in "v-bind:data"
1 | <div id="app">
| ^^^^^^^^^^^^^^
2 | <nav class="navbar navbar-expand-lg navbar-light mb-5">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 | <div class="container">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 | <a class="navbar-brand" href="/">Laravel Forum</a>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 |
| ^^^^^^^^
6 | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 | <span class="navbar-toggler-icon"></span>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8 | </button>
| ^^^^^^^^^^^^^^^^^^^^^^^^^
But in my navbar I don't use Vue, so what's going on here?
I also don't see a line number of the error, and npm run watch ran successful.
What can I do?
Thank you! Jeroen
If you need more information, please ask me.
Level 1
@jeroenvanrensen please i found the same problem and i dont now how to solve
Level 4
What does this means?
Level 15
Hi @korti_mohammed @adirgapalit,
Here's a detailed explanation of what I did and why it didn't work.
I had a list of posts, coming from my API backend.
For each post, I rendered a Post component with Vue, like this:
<Post v-for="post in posts" :post="post" />
What I didn't know is that I used Post::paginate(), in Laravel.
So instead of an array of posts, what I was expecting, Laravel returned a Paginator object.
That is why I couldn't loop over it and v-bind didn't work.
I hope this explanation has been useful.
Please or to participate in this conversation.