0

Хочу понять, как работает Vue: читал документацию, много гуглил, но не могу понять, как мне нужно написать функцию, чтобы получить желаемый результат.

Есть четыре блока, в которых есть тег h3. Мне нужно каждые несколько секунд убирать стиль у одного элемента, и добавлять этот стиль к следующему. Всего их четыре. Идея была такая: сделать массив из идентификаторов, а потом с помощью setInterval переключаться между ними. Но поле el, как я понял, менять нельзя.

Моя попытка:

<div class="col-lg-3 p-0 text-center d-inline-block " id="service_webdesign">
  <img src="css/img/pencil.png" class="p-30" alt="Web & App Design">
  <h3 v-bind:class="{service__title__active: isActive}" class="service__title p-30 m-0" id="service__title__1">Web & App Design</h3>
  <p class="service__description p-30 m-0" id="service__title__1">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.</p>
  <hr class="service_scroll">
</div>
new Vue({
  el: '#service__title__1',
  data: {
    isActive: false,
    id: ['#service__title__1', '#service__title__2', '#service__title__3', '#service__title__4'],
  },

  methods: {
    titleChanger: function() {
      var a = this;
      var n = 0;
      var element = document.getElementById(a.id[n]);
      setInterval(function() {
        a.el = element;
        a.isActive = true;
        n++;
        if (n > 3) {
          n = 0;
        }
        element = document.getElementById(a.id[n]);

      }, 1000)
    }

  },
  mounted() {
    this.titleChanger();
  }

})

Как правильно воплотить эту задумку в реальность?

1

2 ответа 2

2

Для выполнения этой задачи подойдет следующая схема:

  • создать индекс активной услуги;
  • с помощью метода setInterval менять этот индекс;
  • добавить вычисляемое свойство стиля, которое будет зависеть от этого индекса.

Ниже демонстрация данного подхода.

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',

  data: {
    // Индекс текущей активной услуги.
    currentIndex: 0,

    // Модель нашего таймера.
    timing: null,

    // Модель с услугами (массив услуг).
    services: [{
      title: 'Voluptatem enim optio',
      description: 'Maiores adipisci et ut ipsam quo voluptas. Nulla atque et cupiditate odit.',
      image: 'https://via.placeholder.com/180x80'
    }, {
      title: 'Eum praesentium autem',
      description: 'Sint sapiente error eum. Et eveniet omnis deserunt sunt.',
      image: 'https://via.placeholder.com/180x80'
    }, {
      title: 'Voluptatem nihil voluptate',
      description: 'Odit consequatur accusantium excepturi minima velit. Et molestiae maiores ea.',
      image: 'https://via.placeholder.com/180x80'
    }, {
      title: 'Debitis illum ex eum',
      description: 'Commodi quia asperiores dignissimos sint quo tempore. Neque magni aut.',
      image: 'https://via.placeholder.com/180x80'
    }]
  },

  computed: {
    /**
     * Вычисляемое свойство:
     * указывает является ли переданный index
     * равнозначным индексу текущей активной услуги.
     */
    isActive() {
      return index => this.currentIndex === index
    },

    // Задаем стили (класс) для активной услуги.
    activeStyle() {
      return index => {
        return {
          'service__title-active': this.isActive(index)
        }
      }
    }
  },

  /**
   * Используем хук `mounted` для запуска таймера.
   */
  mounted() {
    this.runTiming()
  },

  methods: {
    // Запускаем наш таймер.
    runTiming() {
      this.timing = setInterval(this.changeCurrentIndex, 1000)
    },

    // Изменяем индекс текущей активной услуги.
    changeCurrentIndex() {
      // services.length - количество услуг.
      // ++ - увеличиваем активную услугу на единицу.
      // a % b – это остаток от деления a на b.
      this.currentIndex = ++this.currentIndex % this.services.length;
    }
  },

  beforeDestroy() {
    // При использовании компонентного подхода
    // обязательно удаляем наш таймер.
    clearInterval(this.timing)
  }
});
.services {
  display: flex;
  flex-wrap: wrap;
  max-width: 600px;
  margin: 0 auto;
}

.service {
  width: 50%;
  box-sizing: border-box;
}

.service__title-active {
  color: #08c;
}
<div id="app">
  {{ currentIndex }}
  <div class="services">
    <template v-for="(service, index) in services">
      <article class="service">
        <h3 :class="activeStyle(index)">{{ service.title }}</h3>
        <img :src="service.image" :alt="service.title">
        <p>{{ service.description }}</p>
      </article>
    </template>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

0
2

Вот пример

<script src="https://unpkg.com/vue"></script>

<div id="app">
                <h3 :class="isActive(1)" ref="service__title__1">Web & App Design</h3>
                <h3 :class="isActive(2)" ref="service__title__1">Web & App Design</h3>
                <h3 :class="isActive(3)" ref="service__title__1">Web & App Design</h3>
                <h3 :class="isActive(4)" ref="service__title__1">Web & App Design</h3>



            </div>
</div>

.active {
  background-color:red;
}

new Vue({
  el: '#app',
  data: {
   currentIndex: 1,
   elementsCount:4
  },
  mounted(){
  let self = this;
  setInterval(function(){
  self.nextEl();
  },2000)
  },
  methods:{
  isActive(val){
  return this.currentIndex === val ?  "active" :'' ;
  },
  nextEl(){
  console.log(this.currentIndex);
  this.currentIndex = this.currentIndex === this.elementsCount ? 1 : ++this.currentIndex;
  }
  }
})

Можно доработать под Ваш функционал.

"#el" менять нельзя, потому что это указатель на элемент который надо отрендерить как экземпляр Vue

1
  • Спасибо большое! По примерам Vue смотрел, даже не додумался, что можно isActive как метод сделать. Учиться и учиться еще 30 апр 2019 в 6:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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