vue.js - 多个内联输入值，使用 Vue 渲染函数

问题描述

我正在使用 vue 创建一个填充空白类型的游戏。在基于 JSON 文件的问题中，问题中的_被替换为输入。在我的问题中使用多个输入字段时遇到问题。

我为用户输入初始化一个空数组，然后向 userInput 值添加一个增量，以便它们可以是唯一的。当我开始输入并查看 vue 控制台时，它会创建一个包含 3 个 userInputs 的数组（每个输入应该只有 2、1 个）并且它也只填充 userInput Array 1中的最后一项。

我觉得我很接近，答案就在我如何使用我的 domProps 和 on：{} 调用但在我的情况下找不到文档时遇到问题。为了简单起见，我简化了示例以排除 JSON。任何帮助或方向表示赞赏。

这是一个沙盒示例的链接，我已将代码放入 app.vue

<template>
 <div class="interactive interactive-vue-question interactive-vue-question-iv">
   <ivInput v-bind:class="'iv-input-wrapper'"></ivInput>
 </div>  
</template>

let ivInput = {
  name: "iv",
  render: function(createElement) {
   let arr = [];
   let question = 'Old *_* had a *_*';
   let questionArray = question.split("*");
   let myInput

   let currentAnswer = 0
   //Filter/Remove any Empty or Null values
    questionArray = questionArray.filter(function(e){return e})

   for (let q in questionArray) {
    //If there is no _ wrap the text in a span and push it to the array

    if (questionArray[q] != "_") {
      let questionText = arr.push(createElement("span", questionArray[q]));

    }else{

    myInput = createElement("input", {
      attrs: {
        type: "text",
       // disabled: this.isSuccess
      },

      domProps: {
        //Get the value of the component/input
        value:  this.userInput[currentAnswer],
        name:"iv-"+ currentAnswer
      },
      //Event triggers
      on: {
        input: e => {
          this.userInput[currentAnswer] = e.target.value
        }
      },
    })
    arr.push(myInput)
    currentAnswer++
 }

}//end for loop
return createElement("div", arr);
},
data: function() {
return {
  userInput: [],
  errorMessage: "",
  //answers: this.cData.body.answers,
 // type: this.cData.body.type,
  //typeErrorMessage: this.cData.body.typeErrorMessage,
 // case: this.cData.body.case,
  //accent: this.cData.body.accent
  };
},
  props:['cData'],
}//End iv

export default {
 name: "iv-v1",
 props: ["cData"],
 components: {
  ivInput
 },
 data: function() {
  return {};
 },
};

标签： vue.jsuser-input

这是您问题中组件的修改后的工作版本。我添加了评论来解释我的更改。

let ivInput = {
  name: "iv",
  render: function(h) {
    let children = [];

    for (let ndx = 0; ndx < this.questionParts.length; ndx++) {
      // always add a span containing the question part
      children.push(h("span", this.questionParts[ndx]));
      // the answers basically fill in between each question part,
      // so render an input for every question part *except* the
      // last one
      if (ndx < this.questionParts.length - 1) {
        let input = h("input", {
          // use props instead of domProps
          props: {
            value: this.userInput[ndx]
          },
          on: {
            input: evt => {
              // use $set because we are setting an array value by index
              this.$set(this.userInput, ndx, evt.target.value);
            }
          }
        });
        children.push(input);
      }
    }
    // this can be removed, its just so you can see the changes to
    // userInput as they are typed.
    children.push(h("hr"));
    children.push(h("div", JSON.stringify(this.userInput)));

    // render the component
    return h("div", children);
  },
  data: function() {
    return {
      questionParts: [],
      userInput: [],
    };
  },
  created() {
    // split the question into parts in the created handler
    let question = "Old *_* had a *_*";
    this.questionParts = question.split("*_*");
    // the input data also needs to be initialized here with blank answers
    this.userInput = Array.from(Array(this.questionParts.length - 1), () => "");
  },
  props: ["cData"],
}; //End iv

这是更新后的沙箱。

vue.js - 多个内联输入值，使用 Vue 渲染函数

问题描述

解决方案

推荐阅读