Pass array to Laravel view in Vue

Question

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?

thefallen · Accepted Answer · 2019-03-27 09:21:34Z

1

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.

answered Mar 27, 2019 at 9:21

thefallen

9,8102 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass array to Laravel view in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related