Заменить значение data form.invoice_number во Vue js
Изначально form.invoice_number пусто. В computed методе get я получаю длину массива +1. В mounted я присваиваю новое значение для form.input_name. Но оно применяется только после клика по полю ввода. Как применить значение invoice_number к form.invoice_number во время загрузки компонента?
<templalte>
<input
v-model="invoice_number"
type="text"
name="invoice_number"
placeholder="Number"
class="uk-input uk-width-1-1"
:class="{
'is-invalid': form.errors.has('invoice_number')
}"
/>
</tempalte>
Expand snippet
export default {
props: ['companyID'],
data() {
return {
editMode: false,
company: {},
form: new Form({
invoice_number: '',
company_id: this.companyID,
}),
};
},
methods: {
openModalWindow() {
this.editMode = false;
this.form.reset();
UIkit.modal("#addNew").show();
},
loadCompany(){
axios.get('/api/company/' + this.companyID).then(data => (this.company = data.data));
},
createInvoice() {
this.$Progress.start();
this.form
.post("api/invoice")
.then(() => {
this.$Progress.finish();
this.form.reset();
UIkit.modal("#addNew").hide();
})
this.loadCompany();
},
setNumber() {
this.form.invoice_number = this.invoice_number
}
},
created() {
this.loadCompany();
});
},
mounted() {
this.setNumber();
},
computed: {
invoice_number: {
get () {
return this.company.invoices.length + 1
} ,
set (newValue) {
var newNum = newValue;
this.form.invoice_number = newNum[0];
}
}
},
};
И еще во время загрузки компонента в консоль я получаю ошибку
Error in render: "TypeError: Cannot read property 'length' of undefined"
хотя в DevTools выводится правильное значение computed invoice_number