Laravel Vue, pass data in form from component after submit - laravel

Question

i need a little help about how to get values from a component that is in a form.
This is the form also a photo: form
`
<form #submit.prevent="form.patch(route('profile.update.account'))" class="mt-6 space-y-6">
<div>
<InputLabel for="adresa" value="Adresa" />
<TextInput
id="adresa"
type="text"
class="mt-1 block w-full"
v-model="form.adresa"
required
autofocus
autocomplete="adresa"
/>
<InputError class="mt-2" :message="form.errors.adresa" />
</div>
<DropdownCountries
id="tara"
v-model="form.tara"
required
autocomplete="Romania"
/>
<div class="flex items-center gap-4">
<PrimaryButton :disabled="form.processing">Save</PrimaryButton>
<Transition enter-from-class="opacity-0" leave-to-class="opacity-0" class="transition ease-in-out">
<p v-if="form.recentlySuccessful" class="text-sm text-gray-600">Saved.</p>
</Transition>
</div>
</form>
`
There is the component also a photo: dropdown
`
<template>
<div class="container">
<div class="row justify-content-center" style="margin: 20px 0px 20px 0px;">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<div class="form-group">
<select name="tara" class='form-control' v-model='country' #change='getStates()'>
<option value='0' >Select Country</option>
<option v-for='data in countries' :value='data.id'>{{ data.name }}</option>
</select>
</div>
<div class="form-group">
<select name="judet" class='form-control' v-model='state' #change='getCities()'>
<option value='0' >Select State</option>
<option v-for='data in states' :value='data.id'>{{ data.name }}</option>
</select>
</div>
<div class="form-group">
<select name="oras" class='form-control' v-model='city'>
<option value='0' >Select City</option>
<option v-for='data in cities' :value='data.id'>{{ data.name }}</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
country: 180,
countries: [],
state: 0,
states: [],
city: 0,
cities: [],
}
},
methods:{
getCountries: function(){
axios.get('/api/tari')
.then(function (response) {
this.countries = response.data;
}.bind(this));
},
getStates: function() {
axios.get('/api/judete/' + this.country).then(function(response){
this.states = response.data;
}.bind(this));
},
getCities: function() {
axios.get('/api/orase/' + this.state).then(function(response) {
this.cities = response.data
}.bind(this));
}
},
created: function(){
this.getCountries()
}
}
</script>
`
My problem is that when i press Save button for submitting the form the values from dropdowns are not applied: response
I've been looking on internet for 2 hours can someone explain me why is that.

Answer 1

You should check this: v-model and child components?
This should answer your question. Let me know if you need more informaiton of how passing v-model values works.