仅在第一次滚动后（使用axios）渲染vuejs内容

debugcn 发表于 Dev

bboy

我的（vuejs）主页包含以下内容：

模板： <h3>{{ strings.home_headline }}</h3>

脚本：

data() {
    return {
      strings: []
    };
},
methods: {
    fetchData: function(){
      var self = this;

      // get translatable strings
      axios
        .get(MY_API_URL, {
          headers: { "X-Locale": self.locale }
        })
        .then(function(data) {
          self.strings = data.data;

          // This console works and outputs the right content; 
          console.log("strings: ", self.strings);
          // outputs the text that should come in the H3 
          console.log(strings.home_headline)
        })
        .catch(function(error) {
          console.log("Error", error);
        });
    }
},
created() {
    this.fetchData();
}

该console.log作品有效，但模板h3为空，直到滚动第一个像素，然后所有内容均用文本填充。我在这里做错了什么？

帕特里克·阿特纳

将成员从数组切换到对象

return {
  // you need the fields here as well - an "empty" prepared object
  strings: { 
    home_headline: "", // more fields go here
  }  
};

并更改您正在使用的救生钩，应该可以解决您的问题：

async mounted() {
    await this.fetchData();
}

var app = new Vue({
  el: '#app',
  data() {    
    return {
      strings: { home_headline: ""}
    };
  },
  methods: {
    fetchData: function() {
      self = this;
      //will lead to error
      axios
        .get("error", {
          headers: {
            "X-Locale": self.locale
          }
        })
        .then(function(data) {
          self.strings.home_headline = "TATü"; 
        })
        .catch(function(error) {
          self.strings.home_headline = "TATö"; 
        });
    }
  },
  async mounted() {
    await this.fetchData();
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h3>{{ strings.home_headline }}</h3>
</div>

为了使vue启用更改更新，您需要已经在对象上指定了字段。

关于生命周期挂钩：