There are 2 URLs that I am working with:
/register/register?sponsor=4
The first route, /register, provides a clean input field where users can type freely. The second route, on the other hand, pre-fills the input with a value of 4 and disables it, preventing any modifications by users.
I have successfully managed to retrieve parameters dynamically from the router using vue-router. However, when I access the /register route, the input starts as clean but gets disabled after typing just one character.
This is what I have attempted so far:
<input :disabled="sponsor ? true : false" v-model="sponsor" id="sponsor" type="number" class="form-control" name="sponsor" value="" required tabindex="14">Javascript (Vue.js)
<script type="text/javascript>
var router = new VueRouter({
mode: 'history',
routes: []
});
new Vue({
router,
el: '#app',
data () {
return {
cities: [],
city: '',
selectedCountry: '',
sponsor: null
}
},
mounted: function() {
if (this.$route.query.sponsor) {
this.sponsor = this.$route.query.sponsor
console.log(this.sponsor)
}
},
methods: {
onChangeCountry() {
axios.get('http://localhost:8000/api/cities/country/' + this.selectedCountry)
.then(response => this.cities = response.data)
.catch(error => console.log(error))
}
}
});
</script>