Q:

How to filter a dropdown list in Vue based on another object

I have a address form. Part of the address form is a dropdown that is populated by an object as follows...
{
 'US': 'United States', 
 'MX': 'Mexico', 
 'CA': 'Canada', 
 'FR': 'France, 
 'NZ': 'New Zealand'
 }

The component...
     <dropdown
      :label="$t('placeholder.countryCode')"
      :options="countryCodeOptions"
      v-model="form.countryCode"
      name="countryCode"
    />

countryCodeOptions is the full json of all the countries in the world  
If the user elects to change the shipping address (a conditional checkbox), a second dropdown appears and, say for example the merchant can only ship to US, MX, and CA, how do I filter the second dropdown based on another object that has fewer countries?
Second dropdown needs to be...
{
 'US': 'United States', 
 'MX': 'Mexico', 
 'CA': 'Canada',
}

A:

You can use a computed property. It's not tested, but it gives you an idea, along which lines to move on.
data() {
    form: {
        countryCode: 'US' // as default
    },
    countryCodeOptions: {
        US: 'United States', 
        MX: 'Mexico', 
        CA: 'Canada', 
        FR: 'France', 
        GB: 'Great Britain',
        NZ: 'New Zealand'
    },
    allowedDestinations {
        US: [ {US: 'UnitedStates', MX: 'Mexico', CA: 'Canada'} ],
        GB: [ {DE: 'Germany', GB: 'Great Britain'}]
    }
},
computed: {
    destinations() {
      return this.allowedDestinations[this.form.countryCode];
    }
}

You can use destinations to populate your select input with the allowed destination countries.

