页面加载后如何触发vuejs中的函数？答案

【问题标题】：how to trigger a function in vuejs after the page is loaded?页面加载后如何触发vuejs中的函数？
【发布时间】：2017-08-30 16:43:06
【问题描述】：

我正在尝试根据数据触发一个隐藏或显示图像的函数，我编写了两个函数，一个调用创建的钩子中的 api，第二个函数渲染图像。问题是我如何在加载 dom 后调用第二个函数，现在当我尝试调用第一个函数或创建它时返回我的错误，即 css 无法更改为 null。我尝试使用挂载函数newtick 但它仍然首先触发 render_badges 函数，因此内部值为 null

创建：函数（）{ this.loadlike()

},

methods:{
      loadlike:function(){
        var self = this
        this.$http.get('/api/user_profile').then(function (res) {
          self.tasksdata = res.body
          self.badges = self.tasksdata.data2
          console.log(self.badges)
          console.log(this.tasksdata)
          console.log(this.max)

        })
      },


      getHumanDate : function (date) {

                return moment(date, 'YYYY-MM-DD hh-mm-ss').locale("en-gb").format('LL');

            },


            render_badges:function(){
                var self = this
                var counter = 0;
                self.badges.map(function(e){
                    counter ++;
                    console.log(counter)
                    if(counter <=self.max){
                       document.getElementById("i").style.display = "initial";
                    }
                    else{
                      document.getElementById("i").style.display = "none";

                    }
                })

            },

mounted: function () {
  this.$nextTick(function () {
    this.render_badges();
  })
}

【问题讨论】：

标签： function vue.js hook call

【解决方案1】：

您应该在元素本身上使用 v-if 来根据数据打开或关闭它，而不是操纵 DOM。这是一种与 jQuery 时代学习的直接 DOM 操作不同的思维方式。在 Vue 文档中阅读有关 conditional rendering 的更多信息。

如果您想在 DOM 可用时触发，请使用 mount()

【讨论】：

嘿肯定会研究条件渲染，但我想通过mounted来做，我试过mounted：function () { this.$nextTick(function () { this.render_badges(); }) } 但是不知何故，该函数中的数据为 null，这是在创建时获取的
哦，我明白了。您必须首先在 data() 中声明该数据，否则它不会对它做任何事情。类似于：data(){ return{ badges: []}
是的，它已声明为 taskdata、badges 和 Max，但在渲染徽章中仍然为 null，类似 load 的功能工作正常
如果没有组件中的完整 javascript，很难看到它。您使用 map 而不是 forEach 是否有原因？