Vue.js Vuejs—克隆元素并附加到DOM的正确方法

我有一个HTML输入字段来输入一些信息：

<div id="fruitForm">
    <div class="inputArea">
        <label for="fruit0">Enter Fruit Name</label>
        <input id="fruit0"></input>
    </div>
</div>
<button @click="newInputField">Add More Fruit Input Fields</button>
<button @click="submit">Submit Fruit</button>

当用户选择

添加更多水果输入字段

按钮时，应创建一个新的输入区域，以便HTML如下所示：

<div id="fruitForm">
    <div class="inputArea">
        <label for="fruit0">Enter Fruit Name</label>
        <input id="fruit0"></input>
    </div>

    <div class="inputArea">
        <label for="fruit1">Enter Fruit Name</label>
        <input id="fruit1"></input>
    </div>
</div>
<button @click="newInputField">Add More Fruit Input Fields</button>
<button @click="submit">Submit Fruit</button>

const inputArea = document.getElementsByClassName('inputArea');

然后我更改输入字段的

id

，然后使用

appendChild

将新的输入字段添加到DOM中

---

所以我的问题是：我应该如何用vuejs克隆这个元素？我觉得我没有用vuejs的方式来处理这个问题。我是否应该像列表一样处理此问题并使用

v-for

？还是别的什么？

避免使用Vue直接操作DOM。您可以使用

数据

属性作为模板的模型。答案是肯定的，您可以而且可能应该使用

v-for

进行您所谓的克隆：

var demo=新的Vue({
el:'演示'，
数据：{
柜台:0,，
投入：[{
id:'0'，
标签：“输入水果名称”，
值：“”，
}],
},
方法：{
addInput（）{
这是推({
id:`fruit${++this.counter}`，
标签：“输入水果名称”，
值：“”，
});
}
}
});

{{input.label}
添加输入
我收到此错误，[Vue warn]：属性或方法“addInput”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在“数据”选项或基于类的组件中是被动的。@MattQuaine您在“方法”对象上正确声明了吗？
const inputArea = document.getElementsByClassName('inputArea');