vue.js - Vue load component from Laravel view

Question

I'm new in Vue and Laravel and I'm doing testing about these frameworks.

I would like to load a Vue Component with an array. The idea is to past to Laravel view by Prop parameter of the Vue Component. I'm not sure that this is the correct way or is a better option to get the values use axios directly from the Vue Component.

At the moment I'm trying to load from array Prop paramenter into the component.

The code of the Vue component is:

<template>
  <div>
      <b-form-select
        v-model="selected"
        :options="ar"
        class="mb-3"
        value-field="customer_name">
      </b-form-select>     
 </div>
</template>

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

        data: function() {
          return {
            ar: JSON.parse(this.customers)
          }
        }
    }
</script>

UPDATE

create.blade.php

@extends('layouts.app')
@section ('botones')
@endsection
@section('content')
    <h2 class="text-center mb-5"> Add Task</h2>
    <div class="row justify-content-center mt-5">      
        <div class="col-md-3">
            <form method="POST" action="{{ route('taskjobs.store') }}" novalidate> 
                @csrf
                <div class="form-group">
                  
                <form-task :customers="json_encode($customers)"></form-task> // interpolation is not necessary
               
                <div class="form-group">
                    <input type="submit" class="btn btn-primary btn-dark" value="Add Task">
    
                </div>
            </form>
        </div>     
    </div>
    
@endsection

TaskJobController.php

   /**
     * Show the form for creating a new resource.
     *
     * @return IlluminateHttpResponse
     */
    public function create()
    {
        //
        $customers = Customer::all(['id', 'customer_name']);
        $jobs= Job::all(['id', 'job_name']);
        $concepts= Concept::all(['id', 'concept_name']);
        return view('taskjobs.create')
        ->with('customers', $customers)
        ->with('jobs', $jobs)
        ->with('concepts', $concepts);
    }

Now the form element show a null values but in the ul the elements show fine as a json object. It's very confused for me.

Maybe somebody can help me... Thanks.

question from:https://stackoverflow.com/questions/65842892/vue-load-component-from-laravel-view

Answer 1

Iam not sure about laravel View but in general if are passing a props to a vue component, you need to use bind operator ':' (ie)

Try doing

<form-task :customers="@json($customers)"></form-task>

OR

<form-task :customers="{!! json_encode($customers) !!}"></form-task>

Try defining ar as a computed property like below

The code of the Vue component is:

<template>
  <div>
      <b-form-select
        v-model="selected"
        :options="ar"
        class="mb-3"
        value-field="customer_name">
      </b-form-select>     
 </div>
</template>

<script>
  export default {
        props: ['customers'],
        computed: {
          ar: {
            return JSON.parse(this.customers);
         }
      }
    }
</script>