【问题标题】：Append html in vue component在 vue 组件中添加 html
【发布时间】：2020-01-21 02:42:19
【问题描述】：

我需要在 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);
})

【问题讨论】：

vue 部分在哪里？
@Qonvex620 这个脚本在方法中
你的 div 变量数据也在 vue 中？
@Qonvex620 是的，它们都在同一个组件中，我已经更新了我的代码
为什么不在 axios 调用后更新你的状态并使用该更新来呈现你想要的部分，而不是使用 jQuery 来做到这一点？毕竟，这就是 Vue、React、Aurelia 等库的全部目的。只是我的两分钱。

标签： javascript vue.js

【解决方案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]
  )

}

【讨论】：

感谢它正在工作，但也有问题，1 它只获取我的第一个保存值2 它在第二次保存时返回此错误[Vue warn]: Missing required prop: "value" 3 我如何循环我的数据子项大批？ PS:我会更新我的问题
检查我更新的答案，我补充说。但这只是你的一个想法。不完全是你想要的
感谢更新，我已经解决了它，只剩下 1 个问题，您介意检查我的第二次更新吗？
你的意思是html部分？
是的，添加新值时的功能，基本上你只是将一个值压入变量值中，这样它就不会产生新的循环

【解决方案2】：

据我所见，未呈现按钮是因为您使用的不是原生 HTML 元素，而是自定义 Vue 元素（el-col、el-button、el-input 等）。如果您想使用自定义元素填充 HTML，我建议您按照 Qonvex620 的回答使用 v-for 渲染元素，或者直接使用 HTML 原生元素，如下所示。

$(res.data.data).each(function(_, i){
                    $(i).each(function(__, ii){
                        var row = `<div :span="24" style="margin-top:15px;">...
                                    <input placeholder="Please input your variation name" value="${i.name}" class="input-with-select">...
                                    <input value="${ii.name}" placeholder="Please input your variation value" class="input-with-select">


                                ...
                                    <button type="submit">Update Variations</button>...
                            </div>
                        </div>`;
                        $('.variationData').html(row);
                    });
                });

但实际上，像 Qonvex620 的答案那样渲染 HTML 要好得多。您可以通过这种方式最大化 Vue 的全部功能。

【讨论】：