[Vuejs]-Vue.js – Inject el elements to html

by

0👍

If you are not using the Vue run-time template compiler you can not render Vue components inside v-html. You should do something like this:

<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),
       }));
     }
   }
 }

Leave a comment