Vue

by Dmitri Ganenco

HTML

<div id="app">
  <label class='label'>countrys:* </label><br><br>
  <div v-for="(country, index) in countries" class="label" style="display: inline-block;">
    <input type='checkbox' value="country">&nbsp{{country.geos}} &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

    <img class='addIcon' v-bind="country" :key="country.index" style="width: 26px;height: 20px;margin-right: 8px;margin-top: px;margin-left: -25px;margin-bottom:-5px" src='ad' @click="makeMarketsActive($event, index)">
    <select multiple v-if="!country.isHidden">
                     <option v-for="(market) in country.markets" v-bind="country" >
                    {{ market }}
                         </option>
                        </select>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    countries:[
      {
                "index":0,
                "geos":"America",
                "markets":['a','b','c','d'],
								"isHidden":true
                },
                {
                "index":1,
                "geos":"Canada",
                "markets":['a','b'],
								"isHidden":true
                },
                {"index":2,
                "geos":"Africa",
                "markets":['x','z'],
								"isHidden":true
                }
                ]
  },
  methods: {
  	makeMarketsActive(event, index) {
            this.countries[index].isHidden = false;
}
  }
})