i have a button name 'Add new'.by clicking that button i am pushing data to an array creating the same form.it's creating dynamic form.every form has two field debit and credit. what i want to do is when i will give some value on debit filed then the credit field will disabled also if i give some value in credit field the debit field will be disabled not for the entaire array only for that specific index. how should i do it?
template file:
<template>
<div>
<form action="/action_page.php">
<div v-for="(field,index) in fields">
<div>
<button @click="dataRemove(index)" type="button">X</button>
<div class="form-group">
<label for="debit">Debit:</label>
<input class="form-control" id="debit" name="debit" placeholder="Enter debit"
type="number" v-model="field.debit">
</div>
<div class="form-group">
<label for="credit">Credit:</label>
<input class="form-control" id="credit" name="credit" placeholder="Enter credit"
type="number" v-model="field.credit">
</div>
<div class="form-group">
<label for="type">type:</label>
<input class="form-control" id="type" name="type" placeholder="Enter type" type="text"
v-model="field.type">
</div>
</div>
</div>
<button @click="newfield" class="badge-primary" type="button"> Add new</button>
<button :disabled="disabled" class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
<pre>{{ $data }}</pre>
</div>
<script>
export default {
data() {
return {
field: {
debit: 0,
credit: 0,
type: '',
},
fields: [],
}
},
methods: {
newfield() {
this.fields.push({
debit: 0,
credit: 0,
type: '',
});
},
dataRemove(index) {
Vue.delete(this.fields, index);
},
},
computed: {
disabled() {
}
}
}
