Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    277
    Thanks
    53
    Thanked 3 Times in 3 Posts

    Struggling with Vue2 and select options

    Hello,

    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
    Code:
    <template>
        <div>
    
            <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">
                        {{optionsCountry.name}}
                    </option>
                </select>
    
            </div>
        </div>
    
    </template>
    
    <script>
        import {mapState} from 'vuex';
    
        export default {
            props: [
                'selectedCountry'
            ],
            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 () {
                this.$store.dispatch('fetchCountries');
            },
            computed: {
                ...mapState([
                    'optionsCountries'
                ]),
            },
        }
    </script>


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

    Code:
    <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:
    Code:
       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
    Location
    Washington
    Posts
    8,083
    Thanks
    37
    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
  •