Cannot iterate the data from an array ref VUEJS

Question

I'm having a slight issue here when i try to iterate through the data array from "history" ref

As we see here, there is 2 console log, 1 from the request and 1 after we put the data in history both show 2 array which is what the values should be but there is nothing on the table and yes every row have an unique id in the database

I'm still pretty new to vuejs ^^

Template

<template>
<div class="container">
    <h3 v-if="loading"> Loading... </h3>
     <table>
        <tr>
            <th>Title</th>
            <th>Shares</th>
            <th>Price</th>
        </tr>
        <tr ref="history" v-for="row in history" :key="row.id" >
            <td>{{ row.title }}</td>
            <td>{{ row.shares }}</td>
            <td>{{ row.price }}</td>
        </tr>
    </table> 
</div>

Script

<script>
import { store } from "../store"
import { onMounted, ref, reactive } from "vue"
import { supabase } from "@/supabase"

export default {
setup () {
    const loading = ref(true);
    const user = supabase.auth.user();
    const history = ref([])


    async function getHistory() {
        try {
            loading.value = true;
                let { data, error, status } = await supabase
                .from("history")
                .select(`id, user_id, title, shares, price`)
                .eq("user_id", user.id)


                console.log(data)
                if (error && status !== 406) throw error

                if (data) {
                history.value = data
                console.log(history.value)
                }
            } catch (error) {
                alert(error.message)
            } finally {
                loading.value = false
        }
    }

    onMounted(() => {
        getHistory()
    })
     
    return {
        loading,
        user,
        history,
    }
},

data() {
    return {}
}
}

This suggests there are no row.title, etc, but there could be black text instead. It doesn't matter what happens in a database, it matters what data is, you could reproduce it with static JSON. Please, provide a way to reproduce the problem, see stackoverflow.com/help/mcve — Estus Flask
– Estus Flask, Commented Jul 31, 2022 at 7:09
The data have a title, if i console.log(data[0].title) after queuing the database i'm getting the title — CPPSauce
– CPPSauce, Commented Jul 31, 2022 at 7:20

Mina · Accepted Answer · 2022-07-31 07:16:08Z

3

The issue is using ref="history" on the tr tag, as it will bind the ref with the DOM element, you need to remove it.

    <tr v-for="row in history" :key="row.id" >
        <td>{{ row.title }}</td>
        <td>{{ row.shares }}</td>
        <td>{{ row.price }}</td>
    </tr>

answered Jul 31, 2022 at 7:16

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CPPSauce Over a year ago

Ok that was the issue, for some reason ive seen some people using ref="" so i was guessing to put the ref variable inside. Thanks for clarifying it

Collectives™ on Stack Overflow

Cannot iterate the data from an array ref VUEJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related