I am working on a form using Vue.js and I want to combine the data from the input fields upon submission. I have been struggling to achieve this and created a jsfiddle to showcase my attempt.
In my form, I have three Vue components for each of the input fields. The first component is a dropdown list that I want to change to an input text field for custom options.
Whenever I try to concatenate the data from all three fields, I encounter an undefined error in the JavaScript code.
new Vue({
el: '#product_id',
data: {
selected: '1',
options: [
{ text: 'Product 1', id: '1', value: '1' },
{ text: 'Product 2', id: '2', value: '2' },
{ text: 'Product 3', id: '3', value: '3' },
{ text: 'Product 4', id: '4', value: '4' },
{ text: 'Custom', id: '5', value: '' }
],
product_i: '',
resetKey: 0,
},
methods:{
updateComponent(){
this.resetKey += 1;
console.log(this.resetKey);
console.log('test');
}
},
}),
new Vue({
el: "#product_name",
data: {
product_n: '',
}
});
new Vue({
el: "#product_price",
data: {
product_p: '',
}
});
function combine_product_datas() {
var id = document.getElementById('input1').value;
var name = document.getElementById('input2').value;
var price = document.getElementById('input3').value;
document.getElementById('joint').value = id + '.' + name + '/' + price;
alert(document.getElementById('joint').value);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="row">
<div id="product_id">
<div :key="resetKey">
<small>Product id</small>
<div v-if="selected != ''">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
<br>
<div v-else>
<input id="id" v-model="product_i" value="" type="text" placeholder="Add your product">
<button v-on:click="updateComponent">Reset</button>
</div>
</div>
</div>
<br>
<div id="product_name">
<div>
<div>
<small>Product name</small><br>
<input id="name" v-model="product_n" type="text">
</div>
</div>
</div>
<br>
<div id="product_price">
<div>
<div>
<small>Product price</small><br>
<input id="price" v-model="product_p" type="text">
</div>
</div>
</div>
<br>
<div>
<div>
<button type="submit" onclick="combine_product_datas();">Combine datas</button>
</div>
</div>
<br>
<input type="hidden" id="joint">
<br>
</div>