Question

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

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

我觉得我很亲近，答案就在于我如何使用我的domProps和{}电话，但在我的情况下找不到文档。为简单起见，我简化了我的示例以排除JSON。任何帮助或指示都表示赞赏。

Here is an link to a sandbox example 我已将代码放在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 {};
 },
};

Answer 1

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

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

这是updated sandbox。

多个内联输入值，使用Vue Render函数

1 个答案: