Question

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

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

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

组件片段

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

您可以简单地在组件上添加data$E <- ifelse(!is.na(data$B) & data$D == data$B, "b", ifelse(!is.na(data$C) & data$D == data$C, "c", "unknowwn"))指令，并仅在找到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')
  }
})

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

1 个答案: