Question

我正在尝试使用Vue2播放视频，我正在使用以下代码：

HTML：

<video ref='wave' id='wave' :src='audio.wave'></video>

然后我做一个AJAX请求来获取视频的URL。我知道我必须将“this”保存在另一个变量中，所以使用“vm”变量：

  var vm=this;
    $.post( {blah, blah} ).done(function( response ) {
      var json=JSON.parse(response);
      console.log(vm.$refs); // outputs empty object
    });

当我在console.log（）“vm。$ refs”时，它会显示一个空对象：

{}

但是，如果我在$ .post请求完成后手动将命令输入浏览器控制台，则它包含对我的元素的引用：

{wave：video＃wave}

感激不尽的任何帮助

Answer 1

我假设您在created挂钩中发布了帖子请求。

关于ref注册时间的重要说明：因为refs   它们本身是由渲染函数创建的，你不能   在初始渲染中访问它们 - 它们还不存在！

（来自https://vuejs.org/v2/api/#ref）

如果您在mounted挂钩中发布帖子请求，则$refs应准备就绪，您就可以使用它了。

或...使用nextTick也可以解决问题（如果元素将在下一个DOM更新周期中挂载。）。

var vm = this;
$.post({ blah, blah }).done(function(response) {
  var json = JSON.parse(response);
  // added
  vm.$nextTick(()=>{
    console.log(vm.$refs); 
  });
});

当DOM元素不可见时，Vue2 $引用为空

1 个答案: