current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

I'm using Vue.js with the Mininmalect HTML select plugin to display a list of countries by name and value (value being the 2 digit country code).

I've got it to work when using the plugin to select a country. It's adds the value to the selected state.

What I can't work out is how display a value/country when there is already one in state (i.e. from the database when the page loads).

This is what I have:

<template>
    <select name="country" v-model="country">
        <option v-for="country in countries" value="{{ country.value }}">{{ country.label }}</option>
    </select>
</template>

<script>
    export default {
        data() {
            return {
                selected: 'GB',
                countries: require('../utilities/countries.js'),
            }
        },
        ready() {
            var vm = this;
            $('select').minimalect({
                onchange: function(value) {
                    vm.selected = value;
                }
            });
        }
    };
</script>

I'm struggling to get the select attribute to appear, i.e. <option value="GB" selected>United Kingdom</option> so there is a default when the page is loaded.

share|improve this question
up vote 2 down vote accepted

You've got v-model="country", so if you just set the value of country to the database value, the select will automatically be set to that value.

data() {
    return {
        country: 'GB',
        countries: require('../utilities/countries.js'),
    }
},
ready() {
    var vm = this;
    $('select').minimalect({
        onchange: function(value) {
            vm.country = value;
        },
        afterinit: function() {
            $('select').val(vm.country).change();
        }
    });
}
share|improve this answer
    
Thanks. I have got it working. However the Minimalect (github.com/groenroos/minimalect) layer is not picking it up. I might have to fire over some questions on the Github page. But you have answered my question, so marked it as correct. – Jack Barham Mar 16 at 15:16
    
I added a watch function that may work to solve that. Because minimalect creates a new select element, Vue isn't watching it, and you need to manually manage the change in both directions – Jeff Mar 16 at 15:25
    
Thanks Jeff. Thats doesn't seem to be working. It just loads with an empty select box. – Jack Barham Mar 16 at 15:37
    
Tried one more - manually updating it the first time after the minimalect is initialized – Jeff Mar 16 at 15:49
    
Still not happening. Trying to make a Fiddle, but wont work, with all the libraries. What is strange, I've added $('select').minimalect({//}).val('GB'); and it's still not picking it up and makes me wonder if there is a bug :/ – Jack Barham Mar 16 at 16:13
up vote 1 down vote

Change your v-model with selected. And I think your problem is a performance problem. Add a setTimeout for your function.

<template>
    <select name="country" v-model="selected">
        <option v-for="country in countries" value="{{ country.value }}">{{ country.label }}</option>
    </select>
</template>

<script>
    export default {
        data() {
            return {
                selected: 'GB',
                countries: require('../utilities/countries.js'),
            }
        },
        ready() {
            var vm = this;
            setTimeout(function(){
              $('select').minimalect({
                  onchange: function(value) {
                      vm.selected = value;
                  }
              });
            });
        }
    };
</script>
share|improve this answer
1  
Thanks for the feedback, as per the reply under the other answer, I can't get the select plugin to pick up the default value. Also I tried setTimeOut and it loads the select then the Minimalact wrapper, so I get a FOUC (flash of unstyled content) on the select element. Thanks again for your help. – Jack Barham Mar 16 at 15:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.