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

问题是,在某些情况下,标识为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>

最佳答案

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

10-05 20:47
查看更多