Как задать класс блоку при нажатии

Question

Должен применится элемент из массива который я выбрал , наугад я выбираю firstitem[1], в нем храниться класс , этот класс меняет расположение , но у меня он почему-то при, просто выводит то , что написано в firstitem[1] = class: 'top-center' как сделать так , чтобы когда я сам просто менял [1] цифру из массива и менялся сам класс ?

new Vue({
   el: '#app',
   data: {
    firstitem: false,
    firstitem: [
        {
        class: 'top-left',
      },
      {
        class: 'top-center',
      },
    ],
   },
 });

@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900);
.first-item {
    display: flex;
   align-items: center;
   height: 9.556vh;
   width: 38.542vw;
   opacity: 0.7;
   filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.25));
   background: linear-gradient(90.49deg, #007EFF 0.42%, rgba(0, 0, 0, 0.6) 95.58%);
   box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(1.389vh);
   border-radius: 2.389vh;
    overflow: hidden; 
   position: relative; 
}

.first-item__img {
    float: left;
   height: 5.556vh;
   width: 5.556vh; 
   padding: 1.189vh 1.389vh 0 1.389vh;
}

.first-item__text {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   font-size: 2.03704vh;
   line-height: 1.3;
   display: flex;
   align-items: center;
   letter-spacing: -0.05em;
   color: #FFFFFF;
   text-shadow: 0px 0.4px 4px rgba(0, 0, 0, 0.5);
    padding-top: 2.189vh;
    margin-top: 0;
}

.first-item__progress {
    position: absolute;
    bottom: 0px;
    width: 0%;
    border-bottom: 0.512vh solid #FFFFFF;;
}

.top-left {
    position: absolute;
    top: 900px;
    left: 300px;
}

.top-center {
    position: absolute;
    top: 600px;
    left: 1300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="wraper">
      <button @click="firstitem = !firstitem">ckilc</button>
      <transition name="notify">
         <section class="first-item" v-if="firstitem"> {{firstitem[1]}}
            <img class="first-item__img" src="img/infocircle.png" alt="infocircle">
            <p class="first-item__text">Текстовый текст, что б его! Текстовый текст, что б его! <br>
            Текстовый текст, что б его! Текстовый текст, что б его!</p>
            <div class="first-item__progress"></div>
         </section>
      </transition>  
   </div>

Answer 1

Пожалуйста, читайте документацию по Vue и JavaScript!

Ваши ошибки:

Во Vue data является функцией и должна возвращать объект. Иначе Вы будете получать ошибку от Vue об отсутствии свойства.
Свойство firstitem у Вас уже объявлено для состояния нажатия кнопки – так нельзя! Свойства на одном уровне должны называться уникально.
Вы зачем выводите {{firstitem[1]}}? Вывод объекта в шаблон, а не свойством тега, распечатает его на экран. Собственно, что сделали, то и получили.
Для обращения к свойству объекта нужно указать это свойство (если Вы бы указали распечатать {{firstitem[1].class}} – получили бы на экране top-center).
Чтобы класс работал как надо, его надо помещать в свойство class для HTML-тега.

Вот то, что Вы должны получить (за исключением кнопки "Change position" и метода для изменения позиции – это для демонстрации, как это может работать):

new Vue({
  el: '#app',
  data() {
    return {
      opened: false,
      currentElement: 0,
      firstItem: [{
          class: 'top-left',
        },
        {
          class: 'top-center',
        },
      ],
    }
  },
  methods: {
    setElement() {
      this.currentElement = Number(!this.currentElement)
    }
  }
});

@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900);
.first-item {
  display: flex;
  align-items: center;
  height: 9.556vh;
  width: 38.542vw;
  opacity: 0.7;
  filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.25));
  background: linear-gradient(90.49deg, #007EFF 0.42%, rgba(0, 0, 0, 0.6) 95.58%);
  box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(1.389vh);
  border-radius: 2.389vh;
  overflow: hidden;
  position: relative;
}

.first-item__img {
  float: left;
  height: 5.556vh;
  width: 5.556vh;
  padding: 1.189vh 1.389vh 0 1.389vh;
}

.first-item__text {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 2.03704vh;
  line-height: 1.3;
  display: flex;
  align-items: center;
  letter-spacing: -0.05em;
  color: #FFFFFF;
  text-shadow: 0px 0.4px 4px rgba(0, 0, 0, 0.5);
  padding-top: 2.189vh;
  margin-top: 0;
}

.first-item__progress {
  position: absolute;
  bottom: 0px;
  width: 0%;
  border-bottom: 0.512vh solid #FFFFFF;
  ;
}

.top-left {
  position: absolute;
  top: 100px;
  left: 10px;
}

.top-center {
  position: absolute;
  top: 100px;
  left: calc(50% - 38.542vw / 2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="wraper">
  <button @click="opened = !opened">click</button>
  <button @click="setElement">Change position</button>
  <transition name="notify" v-if="opened">
    <section class="first-item" :class="firstItem[currentElement].class">
      <!-- <section class="first-item" :class="firstItem[1].class"> // Если просто явный элемент -->
      <img class="first-item__img" src="img/infocircle.png" alt="infocircle">
      <p class="first-item__text">Текстовый текст, что б его! Текстовый текст, что б его! <br> Текстовый текст, что б его! Текстовый текст, что б его!</p>
      <div class="first-item__progress"></div>
    </section>
  </transition>
</div>

БЛОГ НА HUSL

Как задать класс блоку при нажатии

Ответы (1 шт):