CODEWITHSUNDEEP
arrayslaravelvue.js
Mohammadreza Ahmadpour
Mohammadreza Ahmadpour

Reputation: 111

Pass array to Laravel view in Vue

in laravel i have ProdoctController and CategoryController, im passing the category data with this function:

public function view(){
  $category = Category::all();
  return view('admin.product.main',['category'=>$category]);
}

its working with normal mode in laravel:

<select>
 @foreach(category as categories)
   <option value='{{category->id}}">{{category->name}}</option>
 @endforeach
</select>

but in vue js i have a categories:[] in data, and i want to use this:

<select v-model="ProductCategory">
<option v-for="category in categories" :value="categories.id">categories.name</option>
</select>

how can i pass the data in categories array?

Upvotes: 0

Views: 76

Answers (1)

thefallen
thefallen

Reputation: 9749

You can do something like this:

<script type="text/javascript">
    window.data = {!! json_encode([
        'categories' => $categories,
    ]) !!};
</script>

<select v-model="ProductCategory">
    <option v-for="category in window.data.categories" :value="category.id">category.name</option>
</select>

First part gets you the categories onto the view in the JavaScript and then Vue will have access to them. I think you should fix your category/categories variables, if this is a real code you've been using them not correctly, e.g. when you have a collection of many and when you have only one.

Upvotes: 1

Related Questions