时间戳

首页 > 解决方案 > 如果具有 id 的元素不存在，则阻止安装组件

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

问题描述

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

问题是，在某些情况下，带有 id 的元素image_id不会出现在页面上，因此会产生大量 javascript 错误（因为页面是使用模板呈现的）。

如果页面上有一个 id 的元素，是否可以仅安装组件，否则完全阻止组件的安装？image-uploader#image_id

组件片段

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>

标签： javascriptvue.jsecmascript-6vuejs2

解决方案

您可以简单地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>

推荐阅读