Javascript 在rails中使用Vue组件（带video.js）时出现问题

我在rails中得到了这个vue组件

<template>
 <div class="hello">
   <h1>THIS IS VUE<h1/>

<video id="videok" class="video-js vjs-default-skin vjs-big-play-centered" 
 controls preload="auto" width="1500" height="700"
 poster="../../../assets/images/logo.png"
 data-setup='{"example_option":true}'>
<source src="../../../assets/videos/vid.mp4" type="video/mp4" />

</video>

</div>

</template>

<script lang="ts">

import { Component, Prop, Vue } from 'vue-property-decorator';
import videojs from 'video.js';


@Component
export default class VideoVue extends Vue {

 protected player: any;

 mounted() {

   this.player = videojs("videok");

}

}

</script>

<style scoped lang="css">
@import '../../src/video.js/dist/video-js.css';

</style>

“THIS IS VUE”渲染良好，但我有此错误

挂载钩子中出错：“TypeError:未提供元素或ID 有效。（videojs）

---

我注意到

document.getElementById（'videok'）

在触发

mounted（）

时为

null

。如果我创建“新项目”并粘贴此组件的代码，效果会很好。

我查看了他们的文档，在这里看到了一个非常不同的示例：

它只是在挂载时实例化Video.js播放器，并在销毁之前销毁它

从“video.js”导入videojs；
导出默认值{
名称：“视频播放器”，
道具：{
选项：{
类型：对象，
默认值（）{
返回{}；
}
}
},
数据（）{
返回{
玩家：空
}
},
安装的（）{
this.player=videojs（this.$refs.videoPlayer，this.options，函数onPlayerReady（）{
log（'onPlayerReady'，this）；
})
},
在…之前{
if（this.player）{
this.player.dispose（）
}
}
}

然后您可以这样使用它：（有关选项信息，请参阅选项指南）

从“@/components/VideoPlayer.vue”导入VideoPlayer；
导出默认值{
名称：“视频示例”，
组成部分：{
视频播放器
},
数据（）{
返回{
视频选项：{
自动播放：对，
控制：对，
资料来源：[
{
src:
“/path/to/video.mp4”，
类型：“视频/mp4”
}
]
}
};
}
};

不要忘记包含Video.js CSS，位于Video.js/dist/Video-js.CSS

---

如何添加字幕？您需要检查他们的文档。

<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

<template>
    <div>
        <video ref="videoPlayer" class="video-js"></video>
    </div>
</template>

<script>
import videojs from 'video.js';

export default {
    name: "VideoPlayer",
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            player: null
        }
    },
    mounted() {
        this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
            console.log('onPlayerReady', this);
        })
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    }
}
</script>

<template>
  <div>
        <video-player :options="videoOptions"/>
    </div>
</template>

<script>
import VideoPlayer from "@/components/VideoPlayer.vue";

export default {
    name: "VideoExample",
    components: {
        VideoPlayer
    },
    data() {
        return {
            videoOptions: {
                autoplay: true,
                controls: true,
                sources: [
                    {
                        src:
                            "/path/to/video.mp4",
                          type: "video/mp4"
                    }
                ]
            }
        };
    }
};