Vue.js - Inject el elements to 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),
}));
}
}
}