What is the process for inputting data into a Inertia component?

Question

What is the process for inputting data into a Inertia component?

I have a simple component:

<script setup>
import {ref} from 'vue'

const labels = []
</script>

<template>
<div v-for="(label, index) in labels" :key="index" v-html="label"></div>
</template>

My goal is to incorporate this Component into an <aside> block displaying "side information". I want this Component to have its own data, separate from the parent element, so I can include it anywhere.

I know how to create a "full page" component where I pass data using

inertia('Page', ['labels' => ['Foo', 'Bar']])

from the controller to the vue component.

However, I am unsure of how to achieve this for the "side" component.

I have set up a route to an invokable controller that would send the data as json, but this would require me to load the data using axios in the traditional vue way.

Now I am questioning how I can accomplish this with inertia. I am aware of manual visits using router from inertiajs/vue, but the get method seems more geared towards "navigating away" rather than "fetching data".

javascript laravel vue.js vuejs3 inertiajs

Answer 1

Answer №1

If you want to utilize the concept of Shared data, you can follow this approach:

// HandleInertiaRequests.php
public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'labels' => ['Foo', 'Bar'],
        ...
    ]);
}

<!-- Vue component -->
<script setup>
import { computed } from 'vue'
import { usePage } from '@inertiajs/vue3'

const page = usePage()

const labels = computed(() => page.props.labels)
</script>


<template>
    <div v-for="(label, index) in labels" :key="index" v-html="label"></div>
</template>

Answer 2

If you want to utilize the concept of Shared data, you can follow this approach:

// HandleInertiaRequests.php
public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'labels' => ['Foo', 'Bar'],
        ...
    ]);
}

<!-- Vue component -->
<script setup>
import { computed } from 'vue'
import { usePage } from '@inertiajs/vue3'

const page = usePage()

const labels = computed(() => page.props.labels)
</script>


<template>
    <div v-for="(label, index) in labels" :key="index" v-html="label"></div>
</template>

What is the process for inputting data into a Inertia component?

Answer №1

Similar questions

The Bootstrap Mobile Navigation transition is not displaying as intended in my CSS coding

Encountering issues with Auth0 route guard functionality when using Nuxt middleware

The function successfully triggers when clicked using (React, JS, TS) but does not respond to key presses

Insert newly added rows' values into the database dynamically

Issue with Google map displaying incorrectly when attempting to print

Change the local date and time to UTC in the format of yy:mm:dd H:M

Can we utilize the elements in Array<keyof T> as keys in T?

Navigating items with Vuetify and V-Virtual-Scroll: A guide to programmatically scrolling into view

Instructions for developing an offset plugin for an HTML5 video player

Jquery allows for the toggling of multiple checkboxes

Effective ways to manage extensive forms in Angular 2

The behavior of Date's constructor differs when applied to trimmed versus untrimmed strings

Converting user input from a string to an object in JavaScript: a comprehensive guide

Encountering a problem while integrating highchartsjs into a Vue3 application

access various paths to distinct iframes

What steps can I take to address the issue of missing @angular/Core modules?

Tips for determining the actions of a node prior to its inception

Display/Conceal JavaScript

Preserving the true IP address when initiating cross-domain requests

Is it possible for Prototype to enhance SVG components?