I have a registration form for a Python/Django project that uses Vue.js. I save the form correctly, but when trying to edit, I can see that the value is loaded properly, but it disappears very quickly, as if Vue.js/JavaScript is erasing it. When inspecting the field, I can see that its value receives the correct value from the registration, but the field becomes blank.
<script>
function capitalizeWords(string) {
if (!string) return string;
const words = string.split(' ');
const capitalizedWords = words.map((word) => {
if (word.length > 1) {
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
} else {
return word.toUpperCase();
}
});
return capitalizedWords.join(' ');
}
var app = new Vue({
el: '#app',
delimiters: ['[[', ']]'],
data: {
street: '',
district: '',
city: '',
state: '',
country: '',
cnpj: '',
name: '',
trade_name: '',
cnae: '',
opening_date: '',
selectedBank: '',
bank: '',
bank_code: '',
nameInBankAccount: '',
cnpjInBankAccount: '',
postal_code: '',
isLoading: false,
isPostalCodeFound: true,
isCNPJFound: true,
display_form_address: false,
display_form_bank: false,
hasError: '{{ error }}'
},
beforeMount: function () {
this.street = this.$el.querySelector('#id_address-0-street').value
this.district = this.$el.querySelector('#id_address-0-district').value
this.city = this.$el.querySelector('#id_address-0-city').value
this.state = this.$el.querySelector('#id_address-0-state').value
this.country = this.$el.querySelector('#id_address-0-country').value
this.cnpj = this.$el.querySelector('#id_company-cnpj').value
this.name = this.$el.querySelector('#id_company-name').value
this.trade_name = this.$el.querySelector('#id_company-trade_name').value
this.cnae = this.$el.querySelector('#id_company-cnae').value
this.opening_date = this.$el.querySelector('#id_company-opening_date').value
this.getError();
},
watch: {
cnpj: function(newValue) {
this.cnpjInBankAccount = newValue;
},
name: function(newValue) {
this.nameInBankAccount = newValue;
}
},
computed: {
isBankDisabled: function() {
return this.selectedBank !== '';
}
},
methods: {
onPostalCodeChange() {
if (this.postal_code.length >= 8) {
this.fetchPostalCodeData()
} else {
this.postal_code = ''
this.street = ''
this.district = ''
this.city = ''
this.state = ''
this.isPostalCodeFound = true
}
},
onCNPJChange() {
if (this.cnpj.length === 14) {
this.fetchCNPJData()
} else {
this.name = ''
this.trade_name = ''
this.cnae = ''
this.opening_date = ''
this.isCNPJFound = true
}
},
showAddress: function () {
this.display_form_address = !this.display_form_address;
},
showBank: function () {
this.display_form_bank = !this.display_form_bank;
},
getError: function () {
if (this.hasError === "True"){
this.showBank();
this.showAddress();
}
},
async fetchPostalCodeData() {
try {
this.isLoading = true
const response = await fetch(
`https://viacep.com.br/ws/${this.postal_code}/json/`, {
method: 'GET',
})
const data = await response.json()
if (data.erro == true || data.erro == 'true'){
this.isPostalCodeFound = false
} else {
console.log(data)
this.street = data.logradouro
this.district = data.bairro
this.city = data.localidade
this.state = data.uf
}
} catch (error) {
console.error(error)
} finally {
this.isLoading = false
}
},
async fetchCNPJData() {
try {
this.isLoading = true
const response = await fetch(
`link da api`, {
method: 'GET',
})
const data = await response.json()
console.log(data)
console.log(response.status)
if (response.status === 404) {
this.isCNPJFound = false
} else {
this.name = capitalizeWords(data.name)
this.trade_name = capitalizeWords(data.trading_name)
this.opening_date = data.fundation_date
this.cnae = data.cnae_code
}
} catch (error) {
console.error(error)
} finally {
this.isLoading = false
}
},
}
})
The fields that are being cleared are:
bank
bank_code
I can’t understand the reason for these values being cleared; I believe it might be related to the loading of JS/Vue.js, but I can’t assert that with clarity. Nonetheless, the values are correctly saved in the database.
The form is:
class BuyerLegalPersonBankAccountForm(forms.ModelForm):
select_bank = MajorBankList(
label='Banco',
required=False,
)
class Meta:
model = CompanyBankAccount
fields = (
'name',
'cpf',
'cnpj',
'select_bank',
'bank',
'bank_code',
'agency',
'account',
'account_type',
)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['bank'].required = False
self.fields['bank_code'].required = False
self.fields['bank'].widget.attrs.update(
{
'v-model': 'bank',
':disabled': 'isBankDisabled',
}
)
self.fields['bank_code'].widget.attrs.update(
{
'v-model': 'bank_code',
':disabled': 'isBankDisabled',
}
)
self.fields['select_bank'].widget.attrs.update(
{
'v-model': 'selectedBank',
}
)
self.fields['name'].widget.attrs.update(
{
'v-model': 'nameInBankAccount',
}
)
self.fields['cnpj'].widget.attrs.update(
{
'v-model': 'cnpjInBankAccount',
}
)
