javascript - 在Vue组件中附加HTML

当axios成功时，我需要附加m个返回的数据，但是它仅附加我的代码的一部分，

屏幕截图

当我单击保存时，它应该使用不同的按钮再次将我保存的数据打印回输入字段中，以进行更新。但它只打印标签



码

HTML

<template>
  <div>
    <div class="variationData"></div>
  </div>
</template>

script

    export default {
      data() {
            return {
                variationParents: [
                    {
                        name: '',
                        type: ''
                    }
                ],
                variationChilds: [
                    {
                        name: ''
                    }
                ],
              }
     },
     methods: {
        addVariants(e) {
            e.preventDefault();
            axios.post('/api/admin/variations/store', {
                childs: this.variationChilds,
                parent: this.variationParents,
            })
            .then(res => {
                console.log(res);
                this.isLoading = false;

                // print back saved data
                $(res.data.data).each(function(_, i){
                    $(i).each(function(__, ii){
                        var row = `<el-col :span="24" style="margin-top:15px;">
                            <el-form-item label="Variation Name">
                                <el-col :span="12" style="margin-top:15px;">
                                    <el-input placeholder="Please input your variation name" value="${i.name}" class="input-with-select"></el-input>
                                    </div>
                                </el-col>

                                <el-col class="line text-center" :span="3">Variation Value(s)</el-col>
                                <el-col :span="9" style="margin-top:15px;">
                                    <el-input value="${ii.name}" placeholder="Please input your variation value" class="input-with-select"></el-input>
                                </el-col>


                                <el-col :span="24" style="margin-top:15px;">
                                    <el-button type="primary" native-type="submit">Update Variations</el-button>
                                </el-col>
                            </el-form-item>
                        </el-col>`;
                        $('.variationData').html(row);
                    });
                });
                //
            })
            .catch(error => {
                console.log(error);
            })
        },
      },
    }

任何的想法？

更新资料

这是我保存的数据返回的方式



这是我根据Qonvex620答案得到的



问题

提供Qonvex620的答案，我遇到了这个问题


只有第一个保存的数据会追加，第二次添加等等。
返回[Vue warn]: Missing required prop: "value"
我还需要在附加中循环保存数据的子元素


当前代码

HTML

<div class="variationData">
    <template v-for="(item, index) in savedVariations" >
        <div :key="index">
            <el-col :span="12" style="margin-top:15px;">
                <!-- parent -->
                <el-input :value="item.name" placeholder="Please input your variation name" class="input-with-select">
                    <el-select slot="prepend" placeholder="Select">
                        <el-option label="Text" :value="item.type"></el-option>
                        <el-option label="Text Area" :value="item.typerea"></el-option>
                        <el-option label="Boolean" :value="item.typean"></el-option>
                    </el-select>
                </el-input>
            </el-col>

            <el-col class="line text-center" :span="3">Variation Value(s)</el-col>
            <el-col :span="9" style="margin-top:15px;">
                <!-- child's -->
                <el-input :value="item.name" placeholder="Please input your variation value" class="input-with-select">
                </el-input>
            </el-col>
        </div>
    </template>
</div>

Script

data() {
  return {
    savedVariations: [],
  }
},
methods: {
  addVariants(e) {
                e.preventDefault();
                axios.post('/api/admin/variations/store', {
                    childs: this.variationChilds,
                    parent: this.variationParents,
                })
                .then(res => {
                    console.log(res);
                    this.isLoading = false;

                    //
                    this.savedVariations= res.data.data
                    //
                })
                .catch(error => {
                    console.log(error);
                })
  },
}

更新2

我也设法循环了我的孩子的数据，但是仍然存在一个问题：如果我在其中添加第二组数据将覆盖第一条附加数据，而不是在其下方/上方添加



码

<div class="variationData">
    <template v-for="(item, index) in savedVariations" >
        <div :key="index">
            <el-col :span="12" style="margin-top:15px;">
                <!-- parent -->
                <el-input :value="item.name" placeholder="Please input your variation name" class="input-with-select">
                </el-input>
            </el-col>

            <el-col class="line text-center" :span="3">Variation Value(s)</el-col>
            <el-col :span="9" style="margin-top:15px;">
                <template v-for="(itemm, indexx) in item.children" >
                    <div :key="indexx">
                        <!-- child's -->
                        <el-input :value="itemm.name" placeholder="Please input your variation value" class="input-with-select">
                        </el-input>
                    </div>
                </template>
            </el-col>
        </div>
    </template>
</div>

理念？

更新3-已解决

我剩下的问题（每次保存多次添加）使用以下代码解决：

.then(res => {
    this.savedVariations.push(res.data.data);
})

最佳答案

在数据上声明一个变量，如下所示

data() {
  return {
     rows: []
  }
}

现在，在axios脚本中，您可以成功执行此操作

axios.get('/admin/price/fetch_roomtypes').then(res => {
     this.rows= res.data.data
})

并在您的html中这样

<div class="variationData">
    <template v-for="(item, index) in row">
       <el-col :span="24" style="margin-top:15px;" :key="index">
           ...
           ...
       </el-col>
    </template>
</div>

要循环访问父级的变体值，请访问下面的代码

<div class="variationData">
        <template v-for="(item, index) in row">
           <el-col :span="24" style="margin-top:15px;" :key="index">
                <div v-for="values in item.variation_values">   // variations values, just change it using your template you used. just an idea
                       ...
                       ...
                </div>
           </el-col>
        </template>
    </div>

因此，在这种情况下，您必须像下面的代码那样构造数据，

data() {
      return {
         variants: [
               {
                  name: '',
                  values: []
               }
         ]
      }
    }

现在，当您添加新的版本时，它将像这样

addVariants() {
   this.variants.push(
      name: 'test'
      values: [5, 10, 3]
  )

}

关于javascript - 在Vue组件中附加HTML，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59833508/