0

При клике на элемент списка должен выводиться соответствующий индексный номер элемента списка. Элементов может быть много, и они могут постоянно перемешиваться, поэтому простой вариант вывода индекса по очереди не подойдёт - надо обязательно с привязкой к выявлению текущего индекса.

new Vue({
  el: "#app",
  data: {
		titles: [
    	{ title: 'First' },
      { title: 'Second' },
      { title: 'Third' }
    ],
    message: ''
	},
  methods: {
  showIndex(){
  	this.message = this.titles[index];
  }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
  cursor: pointer;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>List: 
    <li v-for="(item,index) in titles" @click="showIndex">{{ item.title }} + {{ message }}</li>
  </ul>
</div>

1 ответ 1

1

new Vue({
  el: "#app",
  data: {
		titles: [
    	{ title: 'First', message: '' },
      { title: 'Second', message: ''},
      { title: 'Third', message: '' }
    ],
    message: ''
	},
  methods: {
  showIndex(index){
  	this.titles[index].message = index;
  }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
  cursor: pointer;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>List: 
    <li v-for="(item,index) in titles" @click="showIndex(index)">{{ item.title }} + <span v-if="item.message !== ''">{{ item.message}}</span</li>
  </ul>
</div>

5
  • Только проблема в том, что везде выводится текущий элемент, а нужно, чтобы он выводился только в том поле, на котором произошло событие клика. Если нажать на первый элемент 'First', то выведется 0 только в его поле и больше нигде. Так можно сделать?
    – Alex
    Commented 13 мая 2019 в 12:16
  • Это ж совсем другой вопрос
    – Dmytro
    Commented 13 мая 2019 в 12:19
  • Изменил код . .
    – Dmytro
    Commented 13 мая 2019 в 12:24
  • Да, согласен. Он не был очевиден для меня с самого начала, но актуален. Создать другую тему или дополнить вопрос здесь лучше?
    – Alex
    Commented 13 мая 2019 в 12:25
  • Спасибо большое!!!
    – Alex
    Commented 13 мая 2019 в 12:27

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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