Vue.js -将el元素注入html

Question

我有在线考试的网站。我在测试中创建了一个题，题目是“填空”，意思是填空格里的单词。

问题来自服务器，它是一个类似于该"Today is a [1] day, and i should [2] today"的字符串。我想要做的是获得这个字符串，并用el-input替换所有的[]。

我也做过类似的事情

<template>
 <div class="d-flex flex-column mg-t-20 pd-10">
 <h6 class="tx-gray-800">Fill in the blank areas the missing words</h6>
 <div class="mg-t-20" v-html="generateFillBlankQuestion(question.question)" />
 </div>
</template>

<script>
  export default {
   name: 'FillBlank',
   directives: {},
   props: [ 'question' ],
   components: {
   },
   computed: {},
   data() {
     return {
       input: ''
     }
   },
   filters: {},
   created() { 
   },
   methods: {
       generateFillBlankQuestion(question) {
        var matches = question.match((/\[\d\]/g))
        console.log(matches)
        matches.forEach((element) => {
          console.log(element)
         
         question = question.replace(element, '<el-input />')
       })
       console.log(question)
       return question
      } 
   }
 }

在这行输入中，我将[]替换为question = question.replace(element, '<el-input />')。由于某些原因，当我尝试将其替换为<el-input>时，它不会呈现它。但是如果我使用<input type='text'>，它会渲染它。是否可以注入el elements

Answer 1

如果您没有使用Vue运行时模板编译器，则不能在v-html中呈现Vue组件。你应该这样做：

<template>
 <div class="d-flex flex-column mg-t-20 pd-10">
   <h6 class="tx-gray-800">Fill in the blank areas the missing words</h6>
   <div class="mg-t-20">
     <template v-for="(word,idx) in wordList">
       <el-input v-if="word.blank" v-model="word.value" :key="idx" />
       <template v-else>{{ word.text }}</template>
     </template>
   </div>
 </div>
</template>

<script>
export default 
{
   name: 'FillBlank',
   props: 
   { 
     question:
     {
       type: String,
       default: ''
     }
   },
   computed: 
   {
     wordList()
     {
       const words = this.question.split(' ');
       return words.map(word =>
       ({
         value: '',
         text: word,
         blank: /^\[\d+\]$/.test(word),
       }));
     }
   }
 }