Как заполнить компонент Vue данными с сервера без Ajax?

Question

У меня есть некоторые сомнения по поводу разработки спа-системы с laravel и vuejs. Например, когда я создаю форму с использованием шаблона:

<template>
<form>
<select name="country"></select>
<select name="state"></select>
</form>
</template>

Мои данные о стране и штате заполняются базой данных. Но я бы хотел, чтобы они уже были заселены без необходимости запроса ajax. Я понял, чтобы сделать это, я должен построить серверный компонент, но как это сделать с помощью laravel? Для каждого ввода, который поставляется с данными, заполненными базой данных, я должен сделать ajax-запрос, чтобы заполнить эти входы и только затем показать компонент? Разве нет способа монтировать мой ввод уже заполненными данными из базы данных, используя laravel?

(nodejs будет лучшим решением?)

Answer 1

Используйте реквизиты и передавайте их из представлений Blade

Рассмотрите этот компонент vue

<template>
    <form>
        <input type="text" name="country" :value="country" />
        <input type="text" name="state" :value="state" />
    </form>
</template>

<script>
export default {
    props: ["country", "state"]
};
</script>

Включите его в представление Blade (например, home)

@extends('layouts.app')

@section('content')
<example-component country="{{ $country }}" state="{{ $state }}"></example-component>
@endsection

И вернуть данные, заполненные со стороны сервера (ajax не требуется)

public function index()
{
    $country = "Netherlands";
    $state = "Amsterdam";
    return view('home', compact('country', 'state'));
}

Надеюсь, это поможет