如何在devtools的Vue标签中显示数据？

Question

我有一个带有下表的类别表。

当我单击Cars时，我想在Vue devtools中显示消息。虽然我不想显示数组。

我想展示这个

我想显示什么？

Advert.vue

<template>
    <div>
        <ul class="list-group">
            <li v-for="category in categories" @click="sendAdvert(category.id)" class="list-group-item display">{{ category.name }}</li>
        </ul>
        <!--<ul class="list-group">-->
            <!--<li class="list-group-item hide">{{ category.name }}</li>-->
        <!--</ul>-->
    </div>
</template>

<script>
    export default {
        props: ['categories'],
        data() {
            return {
                adverts: []
            }
        },

        methods: {
            sendAdvert: function (id) {
                const self = this;

                axios.post('adverts/', {
                    id: id
                }).then(response => {
                    this.adverts = response.data;
                });
            }
        }
    }
</script>

web.php

Route::resource('adverts', 'AdvertController');

AdvertController.php

public function index()
{
    $categories = Category::orderBy('id', 'desc')->get();
    return view('Home.adverts', ['categories' => $categories]);
    //$categories = Category::where('parent_id', 0)->get();
    //return view('Home.adverts', compact('categories'));
}

public function store(Request $request)
{
    $id = $request->id;
    $category = Category::find($id);
    return $category;
}

Answer 1

在您的 AdvertController.php 控制器中，store()方法应负责添加新记录。

您应该改用show()方法。

您可以在Resource Controllers中阅读有关Route::resource()的更多信息

public function show(Request $request, $id)
{
    return Category::find($id);
}

在您的 Advert.vue 中，methods应该看起来像这样

<template>
    <div>
        <ul class="list-group">
            <li
              v-for="category in categories"
              @click="sendAdvert(category.id)"
              class="list-group-item display"
            >
              {{ category.name }}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: ['categories'],
        data() {
            return {
                advert:         [],
            }
        },

        methods: {
            sendAdvert(id) {
                // this will load single advert
                axios.get('/adverts/'+id)
                    .then(response => {
                        this.advert = response.data;
                    });
            }
        }
    }
</script>