显示来自rest api的json响应的Vue问题

Question

I have a problem with displaying my response which i get from rest API. After I get response I'm using JSON.stringify to make it like below, then I'm calling action which call a mutation which save it in my store in cars: [] . The variable cars[] in my store and response looks like below so everything is going fine with this.

[
  {
    "id":1,
    "vin":11111,
    "register_number":"asdasd",
    "cost":1.32,
    "latitude":50.875883,
    "longitude":20.634377,
    "service":false,
    "reservation":false
  },
  {
    "id":2,
    "vin":2222,
    "register_number":"asdasd",
    "cost":1.3,
    "latitude":50.4244,
    "longitude":20.3323,
    "service":true,
    "reservation":false
  }
]

Then i'm trying to display it. I use vue getter to get this response from store, if I use getter like <li> {{gettername}} </li> then I can see my data like above but when i want to display them using <v-for="car in CARS" v-bind:key="car"> {{car}} </v-for> then due this key i think i'm getting strange things like this:

[
{
"
i
d
"
:
1
,
"
v
i
n
"
: (when every single sign is in another row ..) 

Like every singe letter is taken as a object or something.... i just wanna display in rows parameters of my car like:

"id":1,"vin":11111,"register_number":"asdasd","cost":1.32,"latitude":50.875883,"longitude":20.634377,"service":false,"reservation":false "id":2,"vin":2222,"register_number":"asdasd","cost":1.3,"latitude":50.4244,"longitude":20.3323,"service":true,"reservation":false

Then i need to bind them for editing and sending update request to my backend. Help me please to resolve and understand this problem. Best regards!

Answer 1

This is a snippet to show the difference between a string and an array:

 (async function() { const todo = await fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(json => { return json }) const stringified = JSON.stringify(todo) console.log('JSON object:') console.log(todo) console.log('Stringified JSON:') console.log(stringified) })();

In the snippet above we receive a todo JSON object, and then console.log() the object itself and a stringified version.