Unable to get and edit the selected dropdown value while editing/updating record.

[radhika248]

While editing a particular form record, the data which is already stored in the form is not displaying in the particular dropdown, as I have to edit/update it again by selecting the dropdown option. I am saving a form through an API.

/Code/
<q-select
outlined
v-model=“country”
:options=“country_data”
:option-value=“opt => opt.id”
:option-label=“opt => opt.name”
emit-value
map-options
style=“max-width: 300px”
></q-select>

/Call through API/
onSubmit(){
console.log(‘submit’)
// this.country = data.country
var postdata = {
hospital_name:this.data.hospital_name,
hospital_address:this.data.hospital_address,
hospital_contact_no:this.data.hospital_contact_no,
hospital_website:this.data.hospital_website,
hospital_email_id:this.data.hospital_email_id,
country:this.data.country,
state:this.data.state,
district:this.data.district,
city:this.data.city,
village:this.data.village,
};

    console.log(this.data.country)
    // this.$refs.desc_ma.validate()

    this.$axios.put('http://127.0.0.1:8000/api/hospitalupdate/'+this.$route.params.id,postdata)
    .then((response) => {
        console.log(response);
        console.log(response.config.data, '****----');
        console.log(response.status);
    })
 },

/Code for fetching the value from API to dropdown/
var baseurl=‘http://127.0.0.1:8000/api/’
this.$axios.get(baseurl+‘get-country’,+token1)
.then((response) => {
console.log(response)

              for(var i=0; i<response.data.length; i++)
              {
                this.country_data.push({name:response.data[i].country_name,id:response.data[i].country_id});
              }
              console.log(this.country_data)
              
            })

[s.molinari]

First thing, please wrap all your code blocks in three backticks. That will format the code for easier reading.

Next thing, when are you calling for the information for the select options? The country_data? Do you know about Vue lifecycle hooks? If not, read up on them.

Scott

[radhika248]

Thank you for responding.
Sorry,as i am new to this, from next time i will send the code blocks in proper backticks.I read about vue lifecycle hooks but i am not able to find the solution on it.

[s.molinari]

What have you tried?

Scott

[radhika248]

I assign v-model=data.country to the <q-select> but it takes only the selected value i am not able to edit it

[s.molinari]

Sorry, but this is going nowhere fast. If it’s a piece of data for the country value you want to show in the select, then just assign it to the model. I was thinking the issue is the data isn’t there to assign, thus why I mentioned lifecycle hooks. Can you show your whole form code in a gist or a repo?

Scott

[radhika248]

Check out the given repo link:
https://github.com/radhika248/QuasarCRUD

[s.molinari]

I’m looking at the edithospital.vue file. Try using the created() hook and put your API fetching code in there. Then assign the values you get to your data props. That’s the simple answer. The more difficult answer is, you need to learn a whole lot more about Vue and how to use it properly also based on a solid knowledge of best web application practices.

Scott