如果不存在具有id的元素，则阻止安装组件

Question

我正在使用表单生成器（Symfony）生成表单的项目。 在某些情况下，下面的内部Vue组件会根据作为道具传入的输入ID，用更加灵活的基于html的文本编辑器替换标准的TextArea输入。

问题是，在某些情况下，具有id image_id的元素将不在页面上，结果生成了大量的javascript错误（因为该页面是使用模板呈现的）。

如果页面上有一个ID为#image_id的元素，是否只能安装image-uploader组件，否则完全阻止该组件的安装？

组件片段

mounted() {
            let DOMInput = document.getElementById(this.inputId);
             //component does stuff if not null
            //need to prevent the mounting of this component altogether if it is null

模板

<image-uploader input-id="image_id"></image-uploader>

Answer 1

您可以简单地在组件上添加v-if指令并仅在找到image_id呈现它：

<image-uploader input-id="image_id" v-if="condition to check whether image-id exists"></image-uploader>

 new Vue({ el: "#app", data: { idExist: null }, mounted () { this.idExist = document.getElementById('test') } }) 

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <div id="app"> <div id="test">test</div> <div v-if="idExist">render if test is here</div> </div>