Как заменить контент по клику?

Question

[Andrej Sharapov]

1. Как настроить кнопки туда/сюда, чтобы менялось содержимое блока в шаблоне?

Накидал пример в песочницу


2. Как указать в шаблоне определенные блоки? Т.е. если я хочу, чтобы показывался не с первого, а, например со второго блока?

Answer 1

[0xD34F]

Научим компонент работать с директивой v-model.

Добавим параметр value - индекс item'а, который надо показать:

props: {
  value: Number,
  ...

computed: {
  item() {
    return this.items[this.value];
  },
  ...

<transition name="slide-fade" mode="out-in">
  <div class="content" :key="value">
    <h2>{{ item.title }}</h2>
    <p>{{ item.text }}</p>
  </div>
</transition>

Чтобы сменить отображаемый item, будем отправлять в родительский компонент новый индекс:

methods: {
  next(change) {
    const len = this.items.length;
    this.$emit('input', (this.value + change + len) % len);
  },
  ...

<button @click="next(-1)">Prev</button>
<button @click="next(+1)">Next</button>

Ну а в родителе останется связать какое-то из его свойств с экземпляром компонента слайдера:

data: () => ({
  active: 1,
  ...

<v-slider
  v-model="active"
  ...

https://jsfiddle.net/5runc0db/

Comments

[Andrej Sharapov]

спасибо

[Andrej Sharapov]

подскажите, пожалуйста, а как перестроить структуру, если
данные передаются из одного компонента в другой?

[0xD34F]

Andrej Sharapov, а вам точно моя помощь нужна?

[Andrej Sharapov]

0xD34F, ну, я пока только учу Вью, а в гугле найти решение не смог, к сожалению. Иначе не писал бы.

[0xD34F]

Andrej Sharapov, понятно, на прямой вопрос ответить не способны. Давайте тогда уж дальше как-нибудь сами.

[Andrej Sharapov]

0xD34F, ладно) спасибо за образец, дальше поковыряюсь