Question

我想使用几乎像复选框一样的图像，并且可以正常使用，但是选择的第一个元素没有将类添加到其中

<div v-for="tenant in shops" :key="tenant.id">
  <div class="" style="position: relative;">
    <label :for="tenant.id+'-input'">
      <img @click="clickShop(tenant.id)"
           :id="tenant.id"  
           :src="tenant.img_url"
           class="tenant-img"
           :class="(isShopSelected(tenant.id))?'selected':''"
           style="height: 100px; width: 150px; margin: 10px;"/>
      <div :id="tenant.id+'-icon'" style="color: green; " 
           class="bottom-right fa fa-check-circle"></div>
    </label>
  </div>
</div>

还有脚本位

export default {
  props: ['form_id'],
  data() {
    return {
      shops: [],
      selected_shops: [],
      categories: [],
      selected: ''
    }
  },
  methods: {
    clickShop(id) {
      let choosen = document.getElementById(id + "-img");
      let icon = document.getElementById(id + "-icon");
      let input = document.getElementById(id + "-input");

      console.log('id is:' + this.selected_shops.indexOf(id));

      // check is in array and remove if it is
      if (this.selected_shops.indexOf(id) >= 0) {
        console.log('removed was:' + this.selected_shops.indexOf(id));

        this.selected_shops.splice(this.selected_shops.indexOf(id), 1);
      } else {
        this.selected_shops.push(id);
      }

      console.log(this.selected_shops);
      // remove shop if 
    },

    isShopSelected(id) {
      // console.log(this.selected_shops);
      let result = this.selected_shops.indexOf(id) > 0;

      if(result) {
        console.log(id);
      }
      // console.log('is shop selected' + id + ' ' + result);
      return result;
    }
  }
}

Answer 1

首先选择的元素将具有索引0，因此此检查将不起作用：

let result = this.selected_shops.indexOf(id) > 0;

应为>= 0。

数组中的第一个元素不会更新

1 个答案: