test
HTML
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="exercise">
<form >
<div v-for="(field, index) in inputFields" :key="index">
<label :for="field.name">{{field.name}}</label>
<input :type="field.type"
:id="field.name"
:placeholder="field.placeholder"
:ref="field.name"
v-model="outputData[field.name]">
</div>
<button type="submit" @click.prevent="submitContent">Absenden</button>
</form>
<div>
{{outputData.Name}}
</div>
</div>
JavaScript
new Vue({
el: '#exercise',
data: {
inputFields: [
{ name: 'First', type: 'text', placeholder: 'First Name' },
{ name: 'Name', type: 'text', placeholder: 'Name' },
{ name: 'Email', type: 'email', placeholder: 'Email' }
],
outputData: {}
},
methods: {
submitContent () {
console.log(this.outputData)
}
}
});