如何用输入字段替换文本中的占位符并将它们与 v-model 和 Vue.js 绑定

Question

我正在构建一个包含测试题的考试页面。这些问题来自“填补空白”类型。我从ajax请求中得到了问题。这些问题是带有特定占位符的简单文本，用于“填补空白”的位置。这些问题可以有一个或多个“填补空白”。

这是一个例子： The apples are {green} or {red}, some times {yellow}.

这应该转换为<p>The apples are <input type='text' v-model='gap1'> or <input type='text' v-model='gap2'>, some times <input type='text' v-model='gap3'>。

到目前为止，我已经设法在我的组件中使用它们来计算值：

computed: {
    addGapsField () {
        let reg = /\{.*?\}/g
        let mtch = ''
        let text = this.question

        // loop through each match
        while((mtch = reg.exec(text)) !== null) {
            text = text.replace(mtch[0],"<input type='text'>")
        }
        return text 
    }
}

如何将 v-model 绑定到此动态生成的输入字段。或者有没有其他方法（v-model 不是我正在寻找的必要解决方案，我不太熟悉 Vue.js 的其他选项）。

Answer 1

您可以将您的问题拆分为一个数组并在模板内使用v-for 进行迭代（但您需要使用<span> 进行内联显示）

new Vue({
  el: "#app",
  data: {
    question: "The apples are {green} or {red}, some times {yellow}.",
    gaps: [],
    last: ''
  },
  computed: {
    addGapsField () {
      let reg = /\{.*?\}/g
      let text = this.question.split(reg)
      text.forEach((part, i) => {
        this.gaps.push('gap' + (i+1))
      })
      this.last = text.pop()
      return text
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <span v-for="(part, index) in addGapsField">
    {{ part }}<input v-model="gaps[index]">
  </span>
  <span>{{ last }}</span>
</div>