【发布时间】：2020-10-26 03:05:39
【问题描述】：
我有使用 vue js 的表单输入，这个输入有按钮来添加更多的列输入这个按钮。喜欢这张照片image。因此，在这个单一输入上，我使用 v-model 及其工作，但在我的新表单上，这个 v-model 和数据绑定不起作用。你可以看到我的表格是这样的：
在这个新的 from 上，这个 v-model 不起作用
<script type="x-template" id="form-input">
<div class="field">
<div class="field-body">
<div class="field">
<label class="label">Nama Barang: </label>
<p class="control is-expanded">
<input
type="text"
id="nama_barang"
class="input"
// v-model="userData.nama_barang" ---> if i add this v-model like this this form not showing , if i remove this its work , but i need v-model to store data
placeholder="nama barang">
</p>
</div>
<div class="field">
<label class="label">Satuan: </label>
<p class="control is-expanded">
<input
type="text"
id="satuan"
class="input"
// v-model="userData.satuan" ---> if i add this v-model like this this form not showing , if i remove this its work , but i need v-model to store data
placeholder="Satuan">
</p>
</div>
<div class="field">
<label class="label">Quantity:</label>
<p class="control is-expanded">
<input
type="number"
id="qtt"
class="input"
//v-model="userData.qtt" ---> if i add this v-model like this this form not showing , if i remove this its work , but i need v-model to store data
placeholder="Qtt" >
</p>
</div>
<div class="field">
<label class="label">Harga:</label>
<p class="control is-expanded">
<input class="input"
type="number"
id="harga"
//v-model="userData.harga" ---> if i add this v-model like this this form not showing , if i remove this its work , but i need v-model to store data
placeholder="Harga">
</p>
</div>
<div class="field">
<label class="label">Harga Total:</label>
<p class="control is-expanded">
{{(userData.qtt * userData.harga) | currency}} // its didnt work because this v-model didnt work
</p>
</div>
</div>
</div>
它是我的导出默认值
export default {
data(){
return{
fields: [],
count: 0,
userData:[{
rek_id:'',
tgl_pengajuan:'',
suplier_id:'',
status:'Aktif',
}],
rek:{},
suplier:{},
fields: [],
count: 0,
}
},
components:{
},
methods:{
submit() {
this.errors = {};
axios.post('/pengadaan/store_induk_pencairan', this.userData).then(response => {
window.location = response.data.redirect;
}).catch(error => {
if (error.response.status === 422) {
this.errors = error.response.data.errors || {};
}
});
},
addFormElement: function(type) {
this.fields.push({
'type': type,
id: this.count++
});
},
},
那么新表单上的这个 v-model 是如何像一个单一表单一样工作的呢？此 v-model 仅适用于第一种形式
【问题讨论】：
标签： vue.js data-binding