Как заменить имя объекта в цикле vue.js?

Question

[Junior Development]

Вопрос сформулировал достаточно коряво, но суть в следующем.
Необходимо при клике на тег li заменить blockItems.items1 на blockItems.items2, а при повторном клике заменить blockItems.items2 на blockItems.items1

<ul class='items'>
		<li class='item' @click='replacItems' v-for='item in blockItems.items1'>
			<div class='item__title'>{{ item.title }}</div>
		</li>
	</ul>

blockItems: {
   items1: [
      {title: 'Загловок 1'},
      {title: 'Заголовк 2'},
   ],
   items2: [
      {title: 'Загловок 3'},
      {title: 'Заголовк 4'},
   ]
}

	replacItems() {
		this.blockItems.items1 = this.blockItems.items2;
	}

Answer 1

[0xD34F]

Что если таких items должно быть больше двух? Давайте решим задачу в более общем виде.

Вместо объекта пусть будет массив, также добавим в компонент свойство, представляющее индекс отображаемого элемента:

data: () => ({
  index: 0,
  items: [
    [ 'hello, world!!', 'fuck the world', 'fuck everything' ],
    [ '69', '187', '666' ],
    [ '!!!', '???', ':::' ],
    [ '+++', '***', '///' ],
  ],
}),

Если индекс меньше длины массива - показываем содержимое соответствующего элемента, по клику увеличиваем индекс; в противном случае показываем кнопку, клик по которой сбросит индекс:

<ul v-if="index < items.length" @click="index++">
  <li v-for="n in items[index]">{{ n }}</li>
</ul>
<button v-else @click="index = 0">давай заново</button>

Comments

[Junior Development]

Исходя из того как я задал вопрос, Вы подсказали верно)
А что если условия немного иначе.

Допустим прописано условие:

После второго нажатия на li у меня появляется кнопка, при нажатии на которую цикл должен проходить по blockItems.items1 и соответственно отображать данные этого массива.

т.е. изначально отображены элементы blockItems.items1, при клике на тег li запускается цикл по объекту blockItems.items2 и отображаются его элементы, при клике снова появляется кнопка при нажатии на которую должен происходить сброс до blockItems.items1

[0xD34F]

Ответ изменил, что скажете?

[Junior Development]

0xD34F, да смысл такой.
Спасибо тебе огромное!!!

Буду безмерно благодарен если покажешь еще как аналогично сотворить , но с объектом в виде

blockItems: {
   items1: [
      {title: 'Загловок 1'},
      {title: 'Заголовк 2'},
   ],
   items2: [
      {title: 'Загловок 3'},
      {title: 'Заголовк 4'},
   ]
}

[0xD34F]

Добавляем вычисляемое свойство - массив ключей объекта:

computed: {
  itemsKeys() {
    return Object.keys(this.items);
  },
},

С помощью индекса достаём ключ, с помощью ключа - свойство объекта:

<ul v-if="index < itemsKeys.length" @click="index++">
  <li v-for="n in items[itemsKeys[index]]">{{ n }}</li>
</ul>