Переключение между классами

266

05 февраля 2019, 13:50

Не могу разобраться, как удалить 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>

Answer 1

Повторяющиеся элементы можно поместить в массив внутрь 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>