我不明白为什么一旦我尝试将 div 标签绑定到我的代码中的 v-for 指令，它就会停止可见

Question

问题在于带有 class 日志的 div 标签，我正在尝试使用从 api 响应中获得的数据填充文本。 当我尝试包含 v-for 指令时，整个 div 将从浏览器中消失，并且控制台没有抛出任何错误。

<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>

Answer 1

infos 是 null 所以 div 不会显示。 下面我添加了一个创建的 function，我在其中调用 hello()。这将填充信息并显示 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>

Answer 2

尝试使用计算方法

<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;
  }

}

数据不是反应性的