v-else not displaying any content-CodePudding

I am currently learning about Vue.js and I found some strange behaviour about which I can't find anything in Internet.

For some reason DIV with v-else doesn't display any content I put inside.

I tried to learn why is that happening and all I found was that it is not advised to use v-for and v-if for same element (which I do not from what I understand).

When I remove v-else everything works perfectly. I put example of my code below (I think it is pretty self-explanatory, but if I am mistaken please say so and I will post more information). Thanks in advance for all the help!

 <template>
      <div v-if="error">{{ error }}</div>
      <div v-if="post" >
        <h3>{{ post.title }}</h3>
        <span v-for="tag in post.tags" :key="tag"> #{{ tag }} </span>
        <p >{{ post.body }}</p>
      </div>
      <div v-else>
        <Spinner />
      </div>
    </template>
    
    <script>
    import Spinner from "../components/Spinner.vue";
    import getPost from "../composables/getPost";
    
    export default {
      props: ["id"],
      components: { Spinner },
      setup(props) {
        const { post, error, load } = getPost(props.id);
        load();
    
        return { post, error };
      },
    };
    </script>

<style>
.post {
  max-width: 1200px;
  margin: 0 auto;
}
.post p {
  color: #444;
  line-height: 1.5em;
  margin-top: 40px;
}
.pre {
  white-space: pre-wrap;
}
</style>

As requested here is my getPost method:

import { ref } from "vue";

const getPost = (id) => {
  const post = ref({});
  const error = ref(null);

  const load = async () => {
    try {
      //simulate delay
      await new Promise((resolve) => setTimeout(resolve, 1000));

      let data = await fetch("http://localhost:3000/posts/"   id);
      if (!data.ok) throw Error("Sorry, no data available");
      post.value = await data.json();
    } catch (err) {
      error.value = err.message;
    }
  };

  return { post, error, load };
};

export default getPost;

And here is how it looks in json-server:

{
  "posts": [
    {
      "id": 1,
      "title": "Welcome to my blog",
      "body": "Dolor proident consectetur veniam magna Lorem enim laboris cupidatat dolor do commodo officia veniam occaecat. Et incididunt in pariatur commodo fugiat elit eiusmod proident duis proident magna laborum occaecat minim. Ex eu sint cillum proident ea Lorem nulla consequat incididunt tempor reprehenderit laborum sit. Enim nulla sint sunt nulla deserunt officia occaecat sunt velit qui in aliquip. Non nulla et mollit esse ad qui mollit id.",
      "tags": ["webdev", "coding", "news"]
    },
    {
      "id": 2,
      "title": "Top 5 CSS tips",
      "body": "Et incididunt in pariatur commodo fugiat elit eiusmod proident duis proident magna laborum occaecat minim. Ex eu sint cillum proident ea Lorem nulla consequat incididunt tempor reprehenderit laborum sit. Enim nulla sint sunt nulla deserunt officia occaecat sunt velit qui in aliquip. Non nulla et mollit esse ad qui mollit id.",
      "tags": ["webdev", "coding", "css"]
    }
  ]
}

CodePudding user response：

If the post is object you need to check it differently:

<div v-if="post && Object.keys(post).length" >

let post = {}
console.log(post) // returns empy object - true
console.log(Object.keys(post).length) // returns 0 - false

post = null
console.log(post && Object.keys(post).length) // returns null - false