I've create a little API and i tried to get messages, my function return a vector and i want to list the content of this vector for this i use v-for="item in messages" but i have an error: Error in render: "TypeError: right-hand side of 'in' should be an object, got null", i use vuejs cli
my code :
<template>
<div>
<div class="messages">
<ul id="array-rendering">
<li :v-for="item in messages">
{{ item.message.content }}
</li>
</ul>
</div>
</template>
<script>
import {login} from "@/login";
import {Messages} from "@/Messages";
export default {
name: 'Messages',
data() {
return {
messages: null,
}
}
},
mounted() {
login('user', 'pass').then(r=>{
Messages.getMessages(r)
.then(r=>{
this.messages = r
})
})
}
}
</script>
First of all v-for syntax is incorrect. Use "v-for" instead of ":v-for".
The other problem that, you set initial value of messages as null. The problem is you can not loop in null value. You can set empty array or object as initial value.
data() {
return {
messages: [] // or {},
}
}