Vue JS 渲染 HTML 元素答案

【问题标题】：Vue JS rendering HTML elementsVue JS 渲染 HTML 元素
【发布时间】：2018-08-10 13:44:23
【问题描述】：

<input type="file" name="" value="">
  <button type="button" name="button">Add More Pictures</button>

我创建了一个文件上传器和旁边的按钮。我想要的是，如果我点击“添加更多图片”按钮，另一个文件上传器应该在按钮下方加载另一个添加更多图片按钮。

如何使用 VueJS 做到这一点？

【问题讨论】：

告诉我你的情况。

标签： html vue.js vuejs2 vue-component

【解决方案1】：

创建一个基于范围的循环，随着数字 vm 属性的增加创建字段。

<div v-for="n in uploadFieldCount" :key="n">
  <input type="file" name="" value="">
  <button type="button" name="button" @click="uploadFieldCount++">Add More Pictures</button>
</div>

并将该属性添加到虚拟机的数据部分：

data() {
  return {
    uploadFieldCount: 1 // initialize with the number of initial file uploads you need
  }
}

【讨论】：

有效！非常感谢。 =) 并且有没有办法从渲染的元素中删除元素。（使用“删除此文件上传”按钮）
你总是使用uploadFieldCount--删除最后一个。
在我看来 v-for 应该与 key 属性一起使用。确保输入值在添加后不丢失。
@Ruslan 虽然这只是在组件上使用v-for 的要求，但添加它并没有什么坏处。完成。