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