WallyJ
5 months ago
132
3
Vue

Associative Array In Console, but not in View

Posted 5 months ago by WallyJ

So, in a Laravel Controller, I create an array of results using:

public function admin()
    {
        $user = Auth::user();

        $clients = DB::table('users')
            ->orderBy('name', 'asc')
            ->get();

        return view('admin.index')->with(compact('user','clients'));

Then I bring it into my Blade view with this line:

<admin :assoc-array="{{ $clients }}"></admin>

The array and its data shows up in my Vue Devtools Console under "Components", but I'm not sure how to display it in my Vue .

What do I put in app.js and the script in Admin.vue to make this iterate through a table?

So far I have:

<template>
<div>Clients
<table>
    <tbody>
        <tr v-for="client in Array">
            <td>{{client.name}}</td>
        </tr>
    </tbody>
</table>
</div>
</template>

<script>
    export default {
        }
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

The area where the data table belongs seems blank, but when I look at the Elements in the Chrome Devtool, I see:

<div assoc-array="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]">Clients
<table><tbody></tbody></table></div>

Which shows 26 object pairs which is the correct count. So I'm close, but I'm missing something. Appreciate your help!

Please sign in or create an account to participate in this conversation.