CODEWITHSUNDEEP
javascriptarraysvue.js
user6591323
user6591323

Reputation: 69

V-for clicks all buttons instead of just one

I am new to Vue.js. I am trying to render check boxes from v-for (which renders correctly) based on an array.

Then I try to render a button beside each check box which opens a multi-select based on the selected index. But every time I click the rendered button, it opens up the multi select across all the checkbox buttons.

HTML:

<div>
  <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='../../images/createScreen/[email protected]' 
      @click="makeMarketsActive($event, index)">
    <select multiple v-if="!isHidden">
      <option 
        v-for="(market) in country.markets" 
        v-bind="country">
        {{ market }}
      </option>
    </select>
  </div>
</div>

JS:

export default {
  name: "Update",
  components: {
  },
  data() {
    return {    
      countries:[
        {
          "index":0,
          "geos":"America",
          "markets":['a','b','c','d']
        },
        {
          "index":1,
          "geos":"Canada",
          "markets":['a','b']
         },
           "index":2,
           "geos":"Africa",
           "markets":['x','z']
         }
      ],
      isHidden:true
    }
  },
  makeMarketsActive(event, index) {
    this.isHidden = !this.isHidden;
  }

Expected result : When clicking the image rendered for each checkbox I just want to see the market for each geo and not for all.

Upvotes: 0

Views: 271

Answers (2)

Daniel Gale
Daniel Gale

Reputation: 663

You also don't need the extra function

HTML

<div id="app">

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

    <img class='addIcon' v-bind="country" :key="country.index" style="margin-right: 8px;margin-top: px;margin-left: -25px;margin-bottom:-5px" src='https://via.placeholder.com/26x20' v-on:click="country.isVisible = !country.isVisible">
    <select multiple v-show="country.isVisible">
       <option v-for="(market) in country.markets" v-bind="country" >{{ market }}</option>
    </select>
  </div>

</div>

JS

new Vue({
  el: '#app',
  data: {
    countries: [{
        "index": 0,
        "geos": "America",
        "markets": ['a', 'b', 'c', 'd'],
        "isVisible": false
      },
      {
        "index": 1,
        "geos": "Canada",
        "markets": ['a', 'b'],
        "isVisible": false
      }, {
        "index": 2,
        "geos": "Africa",
        "markets": ['x', 'z'],
        "isVisible": false
      }
    ]
  }
})

Upvotes: 1

dganenco
dganenco

Reputation: 1616

First of all, as mentioned in comments, you are handling each button state via general property isHidden. So you need to add this property to data array:

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 = !this.countries[index].isHidden;
}
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<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='../../images/createScreen/[email protected]' @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>

Upvotes: 0

Related Questions