Javascript 在vue组件中附加html

当axios获得成功时，我需要追加m个返回的数据，但它只追加了我的部分代码

截图 当我点击save（保存）时，它应该使用不同的更新按钮再次打印我在输入字段中保存的数据。但它只打印标签

代码

HTML

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

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

有什么想法吗

更新 下面是我保存的数据返回的方式

下面是我根据

Qonvex620

答案得到的结果

问题 通过提供的

Qonvex620

答案，我得到了这个问题

只有第一次保存的数据将被追加，第二次保存时将被追加 返回

[Vue warn]：缺少必需的属性：“值”

我还需要在append中循环已保存数据的子元素

现行代码

HTML

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

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

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

代码

---

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

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>

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

现在，当您附加新的变体时，它将如下所示

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

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

---

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

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>

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

现在，当您附加新的变体时，它将如下所示

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

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

---

}

据我所见，按钮没有呈现，因为您使用的不是本机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);
                    });
                });

$（res.data.data）。每个（函数）{
$（i）.每个（函数）{
变量行=`。。。
...
...
更新变体。。。
`;
$（'.variationData'）.html（行）；
});
});

---

但实际上，按照Qonvex620的答案呈现HTML要好得多。您可以通过这种方式最大化Vue的全部功能。

据我所见，按钮不会呈现，因为您使用的不是本机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);
                    });
                });

$（res.data.data）。每个（函数）{
$（i）.每个（函数）{
变量行=`。。。
...
...
更新变体。。。
`;
$（'.variationData'）.html（行）；
});
});

---

---

但实际上，按照Qonvex620的答案呈现HTML要好得多。您可以通过这种方式最大化Vue的全部功能。

Vue部件在哪里？@Qonvex620此脚本在方法中，而您的div variationData也在Vue中？@Qonvex620是的，它们都在同一个组件中，我已经更新了代码为什么不在axios调用后更新您的状态，并使用该更新来渲染您想要的部件，而不是使用jQuery来做这件事？毕竟这就是Vue、React、Aurelia等库的全部用途。只要我的两分钱。Vue部分在哪里？@Qonvex620此脚本在方法中，而您的div variationData也在Vue中？@Qonvex620是的，它们都在同一个组件中，我已经更新了我的代码为什么不在axios调用后更新您的状态，并使用该更新来渲染所需的部件，而不是使用jQuery来执行此操作？毕竟这就是Vue、React、Aurelia等库的全部用途。只需我的两分钱。谢谢，它工作正常，但也有问题，

1

它只获取我的第一个保存值

2

它在第二次保存时返回此错误

[Vue warn]：缺少必需的属性：“value”

3

如何循环我的数据子数组<代码>附言：我将更新我的问题检查我的更新答案，我补充道。但这只是你的一个想法。不完全是你想要的更新我已经解决了它，只剩下一个问题，你介意检查我的第二个更新吗？你是说html部分吗？是的，当你添加新值时，函数基本上你只需在变量值内推一个值，这样它就不会产生新的循环。感谢它在工作，但也有问题，

1

它只获取我第一次保存的值

2

它在第二次保存时返回此错误

[Vue warn]：缺少必需的属性：“value”

3

如何循环我的数据子数组<代码>附言：我将更新我的问题检查我的更新答案，我补充道。但这只是你的一个想法。不完全是你想要的更新感谢我已经解决了它，只剩下一个问题，你介意检查我的第二次更新吗？你是说html部分吗？是的，当你添加新值时，函数基本上只需在变量值内推一个值，这样它就不会产生新的循环