When creating an edit form page, I encountered an issue where the page was not loading properly. Before the page loaded, I ran the following code:
beforeMount(){
if(this.$route.meta.mode === 'edit'){
this.initialize = '/api/artikel/edit/' + this.$route.params.id;
this.store = '/api/artikel/update/' + this.$route.params.id;
this.method = 'put';
}
this.fetchData();
},
In my fetchData() method, I retrieve corresponding data from the server based on the article id.
fetchData(){
var vm = this
axios.get(this.initialize)
.then(function(response){
Vue.set(vm.$data, 'form', response.data.form);
Vue.set(vm.$data, 'rules', response.data.rules);
Vue.set(vm.$data, 'option', response.data.option);
})
.catch(function(error){
})
},
However, when binding the form data to radio buttons in my form, I noticed that it worked fine for input text but not for radio buttons as shown below:
<div class="form-group">
<h5>Publish:</h5>
<label class="radio-inline">
<input type="radio" name="publish" class="styled" value="1" v-model="form.publish">
Yes
</label>
<label class="radio-inline">
<input type="radio" name="publish" class="styled" value="0" v-model="form.publish">
No
</label>
</div>
The radio button should be checked automatically based on the value from the database, but they were not being selected. However, manually clicking the radio buttons showed that the form.publish value changed accordingly in the Vue.js inspector in Chrome.
What could be causing this issue?