Question

我有一个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>

然后我处理点击事件：

export default {
    data() {
        return {

        }
    },
    methods: {
        newInputField() {
            //Create another input area for users to input fruits
        },
        submit() {
            //Do something here
        }
    }
}

当用户选择Add More Fruit Input Fields按钮时，它应该创建一个新的输入区域，以便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>

现在，我已经通过vanilla Javascript使用传统的DOM操作方法来完成这个......像这样的东西：

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

然后我更改了输入字段的id，然后我使用appendChild将新输入字段添加到DOM。

所以我的问题是：应该如何我用vuejs克隆这个元素？我觉得我没有以 vuejs 的方式接近这个。我应该像列表一样使用v-for来接近这个吗？或其他什么？

Answer 1

避免使用Vue直接进行DOM操作。您可以使用data属性作为模板的模型。答案是肯定的，您可以并且可能应该将v-for用于您所谓的克隆：

var demo = new Vue({
  el: '#demo',
  data: {
    counter: 0,
    inputs: [{
      id: 'fruit0',
      label: 'Enter Fruit Name',
      value: '',
    }],
  },
  methods: {
    addInput() {
      this.inputs.push({
        id: `fruit${++this.counter}`,
        label: 'Enter Fruit Name',
        value: '',
      });
    }
  }
});

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="demo">
  <div class="inputArea" v-for="input in inputs" :key="input.id">
    <label :for="input.id">{{input.label}}</label>
    <input :id="input.id" v-model="input.value"></input>
  </div>
  <button @click="addInput">Add input</button>
</div>

Vuejs - 克隆元素并附加到DOM的正确方法

1 个答案: