Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jan 2016
    Thanked 3 Times in 3 Posts

    Struggling with Vue2 and select options


    I have been trying to learn Vue.js for the past few weeks but still struggle with some of its logic. I have been for 6 hours on this, and it is driving me mad :-)

    I can work out how to use a select option menu from a child component to a parent component(inside a form) and use the select value in my parent component axios request but I cannot do the opposite, which is preselect the correct country from my parent axios.get request back to the child component on mounted().

    CHild component option select
            <div class="form-group">
                <label for="country">Select your country:</label>
                <select class="form-control" v-model="selected" v-on:change="emitCountriesList(selected)" id="country">
                    <option value="">Select a country</option>
                    <option v-for="optionsCountry in optionsCountries" :value="optionsCountry" :key="optionsCountry.id">
        import {mapState} from 'vuex';
        export default {
            props: [
            watch: {
                selectedCountry: function(){
                this.selected = this.selectedCountry;//my  watcher wont work because I receive the iso2 code from the get axios......not a model input.
            data() {
                return {
                    selected: "",
                    newValue: ""
            methods: {
                emitCountriesList(selected) {
                    this.$emit('emitCountriesList', selected);
            created: function () {
            computed: {

    Parent component(with less code as the form was very big):

    <k-countries v-on:emitCountriesList="setCountry($event)" :selectedCountry="selectedCountry"></k-countries>
    //I will then use this iso2 country name(ie: AT or FR or US) in my axios post response(which works)
    methods: {
    setCountry(event) {
    this.selectedCountry = event.iso2;//I then send this value to my axios post request to the db
    Now below that I have my axios get results as:
       self.selectedCountry = profile.data.data[0].country;
    even if I send the above value back to the child component as a prop, how can I use it to affect the position of the select option?

    I hope I explained it correctly.

    Thanks in advance.

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Thanked 1,081 Times in 1,077 Posts
    Please post an entire code that can be run in a browser without trying to figure out where things go. And if you are not going to display the page with JS don't use <template> tags.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts