javascript - 在vue组件中添加html

Question

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

屏幕截图

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

代码

HTML

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

脚本

    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提供的答案，我遇到了这个问题

1. 只有第一次保存的数据才会附加，第二次等等。 返回[Vue warn]:缺少必需的 Prop :“value”
2. 我还需要在追加中循环保存数据的子元素

当前代码

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>

脚本

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

我也成功地循环了我 child 的数据，但仍然存在一个问题:如果我添加第二组数据将覆盖第一个附加数据，而不是添加在其下方/上方

代码

<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);
})

Answer 1

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

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]
  )

}