代码之家 › 专栏 › 技术社区 › AnchovyLegend

如果ID为的元素不存在,则阻止安装组件

vuejs2 ecmascript-6 vue.js javascript

AnchovyLegend · 技术社区 · 8 年前

我正在开发一个使用表单生成器(symfony)生成表单的项目。在某些情况下,下面的内部Vue组件使用更灵活的基于HTML的文本编辑器(基于作为属性传入的输入ID)替换标准的文本区域输入。

在某些情况下,问题是具有ID的元素 image_id 不会出现在页面上,因此会生成大量的javascript错误(因为页面是使用模板呈现的)。

可以吗只有安装 image-uploader 组件(如果存在ID为的元素) #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>

1 回复 | 直到 8 年前

akuiper 8 年前

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

推荐文章

Shibaji Biswas · 如何在Template literal的双引号内的html div id中编写JavaScript变量?

1 年前

GulgDev · 为什么不将属性设置为无效值?

1 年前

Koffee · 动画继续使用update()重新启动,而不是在Phaser 3中正常播放

2 年前

Monnt · 如何查看数组是否包括具有特定值的嵌套数组?

2 年前

JsCoder · 用ECDSA对C语言中的数据进行加密#

2 年前

dsi · 排序功能可实现多列的自定义差异

2 年前

huz3y · 如何在JavaScript中基于另一个变量值构建变量?如何重新分配它的值并对该变量执行方法?复制

2 年前

Darigan · clearTimeout将一个函数中的计时器与另一个函数(React.js)一起超时

2 年前

Joseph · 仅在React和JS中生成深色

2 年前

Joseph · 在Javascript中检索一些文本

2 年前