I don't understand why a div tag would stop being visible once I try to bind it to a v-for directive in my code

Question

The issue is with the div tag with class log, I am trying to populate the text with data gotten from the api response. As I try to include the v-for directive ,the whole div disappears from the browser and there is no single error thrown by the console.

<template>
  <div>
    <div class="log" v-for="info in infos" v-bind:key="info" v-text="info.login">
      Username
    </div>
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        name: '',
        infos: null,
      }
    },
    methods: {
      hello() {
        let user = document.querySelector(".search").value;
        let fullname = user.split(" ").join("");
        let msg = "No Username Found";

        const axios = require("axios");
        axios.get("https://api.github.com/users/" + fullname)
          .then(response => (this.infos = response.data))
          .catch(error => alert(error + " " + msg))
      },
      reset() {
        this.name = "";
      }
    }
  };
</script>

You never call `hello()` (in the snippet you provided) – blex Jan 08 '21 at 12:27 — blex, Jan 08 '21 at 12:27

score 0 · Answer 1 · answered Jan 08 '21 at 14:30

infos is null so the div will not show. Below i've added a created function, where I call hello().This will populate infos and show the div.

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        name: '',
        infos: null,
      }
    },
    created() {
      hello();
    },
    methods: {
      hello() {
        let user = document.querySelector(".search").value;
        let fullname = user.split(" ").join("");
        let msg = "No Username Found";

        const axios = require("axios");
        axios.get("https://api.github.com/users/" + fullname)
          .then(response => (this.infos = response.data))
          .catch(error => alert(error + " " + msg))
      },
      reset() {
        this.name = "";
      }
    }
  };
</script>

@Iamchris You've kept us guessing. Please at least provide more info on how to reproduce the issue you're facing. — Yom T., Jan 09 '21 at 02:24
Check the console errors & the response from the ajax call in your browsers developers tools (tab network). Then provide more info. That would make it possible to help you with this. — Gert B., Jan 11 '21 at 13:20

score 0 · Answer 2 · answered Jan 08 '21 at 14:38

0

try using computed method

<template>
  <div>
    <div class="log" v-for="info in infosComputed" v-bind:key="info" v-text="info.login">
      Username
    </div>
  </div>
</template>
...
computed {

  infosComputed: function() {
     return this.infos;
  }

}

data is not reactive

answered Jan 08 '21 at 14:38

David Auvray

288
1
3
20

Thanks, David, I tried your method but it still did not work. – Iamchris Jan 08 '21 at 22:55

I don't understand why a div tag would stop being visible once I try to bind it to a v-for directive in my code

2 Answers2