Несколько встроенных входных значений с использованием функций Vue Render

Question

Я создаю заполнение в пустой игре, используя vue.Если в основе вопроса JSON-файла _ в вопросе заменены входными данными.У меня проблемы с использованием нескольких полей ввода в моем вопросе.

Я инициализирую пустой массив для ввода пользователя, а затем добавляю приращение к значению userInput, чтобы они могли быть уникальными.Когда я начинаю печатать и заглядывать в консоль vue, она создает массив из 3 пользовательских входов (должно быть только 2, 1 для каждого входа), а также заполняет только последний элемент в массиве пользовательских данных 1 .

Я чувствую, что я близок, и ответ лежит где-то в том, как я использую мои domProps и при вызове {}, но не могу найти документы по моей ситуации.Я упростил мой пример, чтобы исключить 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 {};
 },
};

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

А вот обновленная песочница .