使用 api 生成的选项动态添加输入类型选择

Posted 2023-02-22

【中文标题】使用 api 生成的选项动态添加输入类型选择

【英文标题】：Dynamically add input type select with options generate by api

【发布时间】：2022-01-24 02:34:10

【问题描述】：

你好，当用户选择一个生成原因的原因选项时，我尝试生成一个决策树，我们创建一个选择，如果他点击一个选项并且 API 没有返回一个空数组，那么下面的另一个选择带有子原因这一切都是根据API的响应动态创建的，只要不返回空数组等等

<template>
// the first select option don't generate 
           <select v-model="reasonOne" @change="eventOne(reasonOne)">
              <option
                v-for="(reason, key) in reasonsOne"
                :key="key"
                :value="reason.value"
                :selected="reason.item === reasonOne"
                @click="eventOne(reason.item)"
              >
                 reason.item 
              </option>
            </select>

// the div with generate dynamically all select option
         <div v-if="showSav">
            <div id="select-pattern" class="step-two__select-wrapper" />
          </div>
<template/>

<script>
  async eventOne(option) 
    let reasonsReturn = await customerApi.getReturnPattern(
          app,
          this.detailReturn.sku.product.id
        );
        if (!this.reasonsReturn.length) 
          this.showSav = false;
        
        let selectPattern = document.createElement('select');
        let target = document.getElementById('select-pattern');
        selectPattern.className = 'select-create';
        selectPattern.id = 'create-input';
        target.appendChild(selectPattern);
        for (let item of reasonsReturn) 
          let optionPattern = document.createElement('option');
          optionPattern.value = item.id;
          optionPattern.text = item.name;
          selectPattern.appendChild(optionPattern);
        
        document
          .getElementById('create-input')
          .addEventListener('change', async function () 
            let reasonData = await customerApi.getReturnPattern(
              app,
              this.value
            );
          );

</script>

我能够使用它创建第一个选择，但其余的我被卡住了我认为我们必须在选择上创建一个循环，如果 API 返回数据将创建该循环。每次选项更改时调用api时我都不知道该怎么做

【参考方案1】：

要动态创建东西，最简单的方法是使用v-for。我无法重现您的代码，但我可以向您展示结构的外观：

模板：

只需使用 v-for 并为您将创建的每个 input 循环遍历它（此处是单击按钮后创建的）

<div v-for="item in inputs" :key="item.id">
  <!-- HERE YOU CAN PUT YOUR SELECTION -->
</div>
<b-button @click="addNewInput()">Add new Input</b-button>

脚本：

脚本中有两件事要做。首先：定义您的数据并首先创建input，然后为您的click-event 和push 添加一个方法，每次单击按钮时输入一个。

data() 
  return 
    id: 1,
    //following is your first input
    inputs: [
      id: this.id += 1,   //count 1 for every input -> ID IS UNIQUE
    ]
  
,

methods: 
  addNewInput() 
    this.inputs.push(
      id: this.id += 1
    )
  

这就是你可以在方法中使用click-event 或for-loop 的结构，但结构始终保持不变！

希望对您有所帮助！

【讨论】：

感谢 Boby，但我想在单击所选选项时创建一个选择输入