Блог

Главная - Вопросы по программированию - Я использую Laravel vue для передачи переменных в vue через Blade, но он не отображается

Я использую Laravel vue для передачи переменных в vue через Blade, но он не отображается

#laravel #vue.js #laravel-blade

#laravel #vue.js #laravel-blade

Вопрос:

файл блейда (JSON):

 @extends('layouts.app')
    
@section('content')
    <div>
        <test-component :items='{{ $items }}'></test-component>
    </div>
@endsection

компонент vue:

 <template> 
    
    <ul id="example-1">
        <li v-for="item in items" :key="item.id">
            {{ item.id }}
          </li>
    </ul>
</template>

<script>
    // Vue.js のインスタンス
    module.exports = new Vue({
        props: {
            items: {
                type: Object,
                defalut: {},
            },
        },
    })
</script>

Инструмент разработчика Google:

  <ul id="example-1" items="[object Object],[object Object],[object
 Object],[object Object],</ul>

Предупреждение:

[Предупреждение Vue]: свойство или метод «items» не определены в экземпляре, но на них ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным либо в параметре data, либо для компонентов на основе классов, путем инициализации свойства.

Результат обработки будет таким. Я не знаю, какую ошибку я допустил.

Комментарии:

1. не могли бы вы объяснить это подробнее? <ul id=»example-1″ items=»[объект Object], [объект Object],[объект Object],[объект Object],</ul>

2. <ul id=»example-1″ items=»[object Object],[object Object],[object Object],[object Object],</ul> Это выглядит так при использовании инструментов разработчика Google.

3. что такое $items в контроллере?

4. return view(‘chat.vue’)->with(‘item’, $items); blade <чат-компонент v-bind:item=’@json($items)’></чат-компонент>

Ответ №1:

Просто определите свой реквизит, как показано ниже. Почему вы определяете реквизиты, как указано выше? props:['items']

Ответ №2:

 module.exports = new Vue({

Обозначение здесь было неправильным

Метки: