Shiva
6 months ago
23
0
Vue

Getting a child relation in vue

Posted 6 months ago by Shiva

In my laravel app I need to loop through the products and grab their code, also the products link to each other because some products are the same, just different colour, so I've made it that they have parent product. The problem I'm having is getting the "child" product to show up in my select drop down.

This is how I have it in a normal laravel blade which works

<select class="form-control mx-sm-3 mb-2" id="code" name="code">
    @foreach($parent_product as $parent)
        <option value="{{ $parent->code }}">{{ $parent->code }}</option>
        
        @if(count($parent->parent))
            @foreach($parent->parent as $child)
                <option value="{{ $child->code }}">{{ $child->code }}</option>
            @endforeach
        @endif
    @endforeach
</select>

But now this is what I have in my product.blade.php

<div id="app">
    <code-selection :products="{{ $parent_product }}"></code-selection>
</div>

and this is what I have in my vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an Supplier Code Selection component.
                        <br>

                        <label for="parent-product">Parent Product</label>
                        <select name="parent-product" id="parent-product" class="form-control">
                            <option v-for="product in products" :value="product.code">
                                {{ product.code }}


                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: [
            'products',
            'selected_parent'
        ],

        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Please sign in or create an account to participate in this conversation.