Populating data from table via inertia

Question

OK, I need to make this clear, I am OLD SCHOOL. Learning Inertia is a goal of mine but I am having issues wrapping my head around this fundamental. I am just asking someone to tell me what I did wrong, so I can click it back in place and move forward. With that in mind, here is what I am TRYING to accomplish.

I also want to STRESS I am giving EVERYTHING because I am not sure where I went wrong and I really cannot stand when people do not post enough info to solve their challenge, so sorry if this is more than I needed to share

I have a dropdown menu, it needs to pull the data from a table in the database called networks

I have created a controller and model and route:

Route:

Route::resource('networks', NetworkController::class);

Model:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Networks extends Model
{
    protected $fillable = [
        'network_name',
        'network_description'
    ];
}

?>

Controller:

<?php

namespace App\Http\Controllers\Networks;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

use App\Models\Networks\Networks;
use Inertia\Inertia;

class NetworkController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $networks = Network::latest();

        return Inertia::render('Network/Index', ['networks' => $networks]);
    }
/* CRUD FRAMEWORK BELOW */
?>

Migration:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('networks', function (Blueprint $table) {
            $table->id();
            $table->string('network_name');
            $table->string('network_description');
            $table->timestamps();
        });
    }

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

Finally, I have a Vue Component:

<template>
  <Listbox as="div" v-model="selected">
    <ListboxLabel class="mb-2 block text-md font-medium text-gray-100">Pick a network </ListboxLabel>
    <div class="mt-1 relative">
      <ListboxButton class="relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500 sm:text-sm">
        <span class="block truncate">Select a network...</span>
        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
          <SelectorIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
        </span>
      </ListboxButton>

      <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
        <ListboxOptions class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
          <ListboxOption as="template" v-for="network in networks.data" :key="network.id" :value="network_name" v-slot="{ active, selected }">
            <li :class="[active ? 'text-white bg-red-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-8 pr-4']">
              <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
                {{ network.network_name }}
              </span>

              <span v-if="selected" :class="[active ? 'text-white' : 'text-red-600', 'absolute inset-y-0 left-0 flex items-center pl-1.5']">
                <CheckIcon class="h-5 w-5" aria-hidden="true" />
              </span>
            </li>
          </ListboxOption>
        </ListboxOptions>
      </transition>
    </div>
  </Listbox>
</template>

<script>
import { ref } from 'vue'
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
import { Head } from "@inertiajs/inertia-vue3";
import { Link } from "@inertiajs/inertia-vue3";

export default {
  components: {
    Listbox,
    ListboxButton,
    ListboxLabel,
    ListboxOption,
    ListboxOptions,
    CheckIcon,
    SelectorIcon,
    Link, 
    Head,
  },
  props: {
      networks: Object,
  },
  setup() {
    const selected = ref(networks[1])

    return {
      selected,
    }
  },
}
</script>

It isn't getting the data and I cannot for the life of me understand why. Its driving me up the wall. I know what I would do in axios to make this happen but Inertia just seems so powerful and I am missing out NOT using it.

Any help would be forever thankful.

Answer 1

$networks = Network::latest()

will return a query builder. To get the data set chain a get() on the end.

Try:

$networks = Network::latest()->get()