Vue component in a foreach loop

@drs135 can you post your Vue component and also the controller method that is passing the data into this component?

is it possible that you are only passing 1 row into your array?

How do I show the code? Do i just copy and paste it on here?

@drs135 copy and paste but add three back ticks before and after each code block.

@foreach ($modules as $module)
<input-form 
 
:course="'{!!$module->Course!!}'"
:school="'{!!$module->School!!}'"

/>
@endforeach 

This is the blade file

<template>
<v-container>
    <v-card width="20%" style="border-radius: 2.5em; " class="ms-10" dark>
        <v-container>
          <v-btn
            style="position: absolute; z-index: 5; border-radius: 20px; height: 63px; left: -2em; top: -1em;" :href="`${this.course}`"
          >
            <v-icon color="blue">mdi-share</v-icon>
          </v-btn>
          <v-img
            max-height="100%"
            max-width="100%"
            fit
            src="https://cdn.dribbble.com/users/747805/screenshots/9756616/media/66d965176548313bd8f8225fe9a2fea9.jpg"
            style="border-radius: 1.5em;"
          ></v-img>
          <div>
            <v-card-title>{{course}}</v-card-title>
            <v-card-subtitle>{{school}}</v-card-subtitle>
            <h1>{{id}}</h1>
          </div>
        </v-container>
      </v-card>
</v-container>
</template>

<script>
export default {
    name:"InputForm",
    props: ['course', 'courseGroup', 'school', 'id'],
    data: ()=> ({
       
    }),
}
</script>

The vue file

class ModulesController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $modules = Module::all();
        return view('modules.index', ['modules' => $modules]);
    }
}

The controller

@drs135 can you re edit and put your ticks on a new line?

Done, sorry

Is there anything i did wrong?

@drs135 can you check you've posted all of the blade as it looks like you've missed the opening bit of your @foreach

Ahh my bad, I must have missed it out when copying and pasting. I do have the opening part in my code however

@drs135 can you also paste your model for Module.

usually I would expect a relationships in the model to be lower case

eg course & school. You've got them capitalized which maybe an issue.

class CreateModulesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('modules', function (Blueprint $table) {
            $table->id();
            $table->string('Course');
            $table->string('Course_Group');
            $table->string('School');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('modules');
    }
}

@drs135 ok. so you have Course and School as columns in your table. Field names should be lowercase though (although this isn't the issue).

The only thing I can think of now is that your query

 $modules = Module::all();

is only returning a single row.

if you place the following in your blade above your @foreach

<?php dd( $modules) ?>

do you get multiple items in your array?

I get multiple items in my array

@drs135 looks like your error maybe due to missing props.

you've declared props as

 props: ['course', 'courseGroup', 'school', 'id'],

and are doing the following:

  <h1>{{id}}</h1>

but not passing in the id (or courseGroup)

BTW if you are using chrome, install vuejs developer tools and you should be able to see any errors inside vue components.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

I dont get any error messages, however only the first set of data passes through, so the course and school data is shown on the title and subtitle for the first item in the array, however the 2nd item doesn't get shown. If i do this

@foreach ($modules as $module)

<div>
            <v-card-title>{{course}}</v-card-title>
            <v-card-subtitle>{{school}}</v-card-subtitle>
            
          </div>
@endforeach

in the blade file it will show all of the entries, but whenever i use the vue component it just shows the first one and then stops

@drs135 I still think its to do with your missing id.

I would reinstate your component, remove id and courseGroup from your props and remove

<h1>{{id}}</h1>

I can't see any other issues apart from the missing props.

@drs135 I am not sure if it is even possible to put Vue components in PHP foreach, maybe you should use v-for directive with :key?

I mean you can wrap your InputForms in other component and let Vue handle modules iteration.

InputsList.vue

<template>
<!-- in your case it should be module.Course and module.School, but I recommend to change field names to lower case, as PSRs suggest to do so -->
<input-form v-for="module in modules" :course="module.course" :school="module.school" :key="module.id" />
<!-- or pass whole module as an object, but then you should change InputForm.vue as well -->
<input-form v-for="module in modules" :module="module" :key="module.id" />
</template>

<script>
// import InputForm component

export default {
    name:"InputsList",
    props: ['modules'],
    data: ()=> ({
       
    }),
    components: {InputForm}
}
</script>

Blade file:

<inputs-list :modules="'{!!$modules!!}'" />

I removed all the unused props but I still only get 1 entry

There are no errors or warnings in the console. How would you go about sending laravel data to a vue component? I tried using v-for but ran into an error

@jewelofthenile I've seen other examples of vue components in foreach so I don't think that's an issue although it probably would be tidier to use a v-for.

@drs135 what was the error you got using v-for?

perhaps switch out your blade to the following:

<div v-for="module in modules" :key="module.id">
   <input-form 
 
:course="'{{$module->Course}}'"
:school="'{{$module->School}}'"

/> 
</div>

app.js:39042 [Vue warn]: Property or method "modules" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

when I use the following code

<template>
<v-container>
    <v-card width="20%" style="border-radius: 2.5em; " class="ms-10" dark v-for="module in modules" :key="module">
        <v-container>
          <v-btn
            style="position: absolute; z-index: 5; border-radius: 20px; height: 63px; left: -2em; top: -1em;"
          >
            <v-icon color="blue">mdi-share</v-icon>
          </v-btn>
          <v-img
            max-height="100%"
            max-width="100%"
            fit
            src="https://cdn.dribbble.com/users/747805/screenshots/9756616/media/66d965176548313bd8f8225fe9a2fea9.jpg"
            style="border-radius: 1.5em;"
          ></v-img>
          <div>
            <v-card-title>{{modules.Course}}</v-card-title>
            <v-card-subtitle>{{modules.School}}</v-card-subtitle>
            
          </div>
        </v-container>
      </v-card>
</v-container>
</template>

<script>
export default {
    name:"InputForm",
    props: ['module'],
}
</script>

@foreach ($modules as $module)

<input-form 
 
:module="{{$module}}"

/>

@endforeach

@drs135 set props to

 props: ['modules'],

and blade as

<input-form 
 
:modules="{{$modules}}"

/>

this is because you are now passing in the whole modules array and iterating inside your vue component.

you still need to keep to using module inside your loop.

         <v-card-title>{{module.Course}}</v-card-title>
            <v-card-subtitle>{{module.School}}</v-card-subtitle>

It worked! Thanks

@drs135 yay.