PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, October 13, 2022

[FIXED] why does my app not display the api response properly

 October 13, 2022     axios, json, vue.js     No comments   

Issue

so my api is returning the correct info from my sqlite db ( i think)

this is the response i get when i just do {{ vendor }} [ { "id": 1, "vendor_name": "pip" }, { "id": 3, "vendor_name": "test1" } ]

but when i add the ".vendor_name" to the v-for in my template it disappears

is the api response in the wrong format or am i assigning it to the "ref" wrong?

im new to vue and im trying to figure out why this is happening any help is greatly appreciated

<script >
import axios from 'axios'
import { ref } from 'vue'

export default {
    setup () {
        const vendors = ref()

        const loadvendors = async () => {
        const response = await axios.get('http://localhost:1337/vendors')
        vendors.value = response.data
        }

        loadvendors()
       
        return {
            vendors
        }
    }
}


</script>

<template>
    
        <h1>Vendors</h1>
        
        <li v-for="vendor in vendors">{{ vendor.vendor_name }}</li>


</template>

Solution

got it, all i had to do was use

<li v-for="vendor in vendors.vendors" :key="vendors.id">{{ vendor.vendor_name }}</li>

instead of

<li v-for="vendor in vendors" :key="vendors.id">{{ vendor.vendor_name }}</li>



Answered By - Yehuda Freedman
Answer Checked By - Marilyn (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing