Question

我正在使用Vue开发测验制作器应用，我想在页面上显示一些绑定到数据模型的生成的输入元素。但是在计算区域生成了输入标签之后，当我更改输入内容时，就不会绑定任何模型。

<%--in html file--%>
<span v-html="currentQuestion.splitedTitle"></span>

splitedTitle: function() {
            var split = this.currentQuestion.title.split('$');
            var result = '';
            var order = vm.currentQuestion.questionOrder;
            for (let i = 0; i < split.length; i++) {
                const splitElement = split[i];
                result += splitElement;
                var inputElement = '<input type="text" class="form-control input-in-text" :class="isFillInTheBlanksAnswerTrue('+ i +')" ' +
                    'v-model="answers['+ order +'].choice['+i+']" onchange="vm.inputChanged()"/>';
                if (i < split.length - 1) {
                    result += inputElement;
                }
            }
            return result;
        },

如果您告诉我该怎么办，我将不胜感激。

Answer 1

Vue模板≠HTML；您正在将v-html与无法使用的Vue模板字符串一起使用。

如果您需要在组件模板中动态生成元素，则需要通过构建要在代码中显示的UI模型，然后使用v-for，{{ 1}}等；或者对于更复杂的UI，您可能需要手动编写render function。

使用v模型生成输入标签

1 个答案: