Question

我试图触发一个隐藏或显示基于数据的图像的函数我编写了两个函数，它调用创建的钩子中的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();
  })
}

Answer 1

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

如果您想在DOM可用时触发，请使用mounted（）

如何在加载页面后在vuejs中触发一个函数？

1 个答案: