2

Не могу разобраться, как удалить class="open" у class="options". Когда раскрыт select при клике на другой select, тот который открыт, закрывался, а на который нажали, открывался. Сейчас они у меня открываются все.

new Vue({
  el: "#app",
  data: {
    isActive: false,
  	number: '1'
  }
})
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
.select {
  display: inline-block;
}
.value_num {
  background-color: #777;
  padding: 5px;
  width: 100px;
  text-align: center;
  cursor: pointer;
}
.options {
  background-color: #ccc;
  text-align: center;
  width: 100px;
  padding: 5px;
}
.options li {
  padding: 5px 0;
  cursor: pointer;
  }
.options li:hover {
  background-color: #fff;
}
.options.open {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <div class="select"  v-on:click="isActive = !isActive">
    <div class="value_num">
      <span class="number">{{number}}</span>
    </div>
    <ul class="options" v-if="isActive">
      <li class="option" v-for="i in 4">{{ i }}</li>
    </ul>
  </div>
  <div class="select" v-on:click="isActive = !isActive">
    <div class="value_num">
      <span class="number">{{number}}</span>
    </div>
    <ul class="options" v-if="isActive">
      <li class="option" v-for="i in 4">{{ i }}</li>
    </ul>
  </div>
  <div class="select" v-on:click="isActive = !isActive">
    <div class="value_num">
      <span class="number">{{number}}</span>
    </div>
    <ul class="options" v-if="isActive">
      <li class="option" v-for="i in 4">{{ i }}</li>
    </ul>
  </div>
</div>

2
  • 3
    зачем при использовании vue использовать jquery?
    – Grundy
    8 окт 2018 в 12:24
  • Для начала селект стоит выкинуть в отдельную компоненту, тогда у него будет свой isActive. Сейчас он один на всех. Для селектов стоит написать директиву-событие click-outside для закрытия по клику снаружи. 9 окт 2018 в 4:58

1 ответ 1

0

Повторяющиеся элементы можно поместить в массив внутрь data и от туда выводить через v-for. isActive для каждого меню отдельный и хранится в объекте, то же самое для children и name, первое это свойство конкретно элементов меню, второе - имя меню.

Свойство data должно быть функцией.

new Vue({
  el: "#app",
  data () {
    return {
      options: [
        {
          isActive: false,
          name: 'Я первый',
          children: [1, 2, 3, 4]
        },
        {
          isActive: false,
          name: 'Я средний',
          children: [4, 3, 2, 1]
        },
        {
          isActive: false,
          name: 'Я последний',
          children: [1, 2, 3, 4]
        }
      ],
      isActive: false,
      number: '1'
    }
  }
})
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
.select {
  display: inline-block;
  margin-left: 20px;
}
.value_num {
  background-color: #777;
  padding: 5px;
  width: 100px;
  text-align: center;
  cursor: pointer;
}
.options {
  background-color: #ccc;
  text-align: center;
  width: 100px;
  padding: 5px;
}
.options li {
  padding: 5px 0;
  cursor: pointer;
  }
.options li:hover {
  background-color: #fff;
}
.options.open {
  display: block;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <div>
  <div
    v-for="(item, index) in options"
    :key="'list-' + index"
    class="select"
    @click="item.isActive = !item.isActive"
  >
    <div class="value_num">
      <span class="number">{{ item.name }}</span>
    </div>
    <ul class="options" v-if="item.isActive">
      <li 
        class="option" 
        v-for="i in item.children"
        :key="'option' + i"
      >
        {{ i }}
      </li>
    </ul>
  </div>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.