У меня есть это приложение Vue
var app = new Vue({
el: '#main',
delimiters: ['${', '}'],
data () {
posts: [
{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
},
{
id: 2,
title: 'Post title 2',
description: 'Post description 2'
},
{
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}
],
},
methods: {
getPostData: function (event) {
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts"><a @click="getPostData">${ post.title }</a></li>
</ul>
</div>
Здесь идет описание из щелчка Я хочу щелкнуть элемент в списке и отобразить описание из этого пункта в элементе # item-description.
Как я запрограммировал эту getPostData для получения описания из элемента, на который я нажимаю.
Tnx
Всего 2 ответа
Вам нужно как-то сохранить выбранный элемент или описание. Вы можете сделать это, вызвав метод из вашего шаблона, передав элемент в качестве параметра. Например, вот так:
var app = new Vue({
el: '#main',
data() {
return {
posts: [{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
}, {
id: 2,
title: 'Post title 2',
description: 'Post description 2'
}, {
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}],
currentDescription: null
};
},
methods: {
setDescription(item) {
this.currentDescription = item.description;
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts">
<a @click="setDescription(post)">${ post.title }</a>
</li>
</ul>
</div>
<div id="item-description">{{ currentDescription }}</div>
Если вы хотите асинхронно извлекать новые данные по клику, вы можете получить данные непосредственно в методе setDescription
.
РЕДАКТИРОВАТЬ:
Вероятно, лучше также сохранить идентификатор сообщения, чем само описание. В этом случае у вас есть доступ ко всему сообщению, а не только к описанию. Затем вы также можете проверить, активен <li>
текущий <li>
и т. Д. Вот пример этого. В этом примере я использовал рассчитанные свойства, к которым можно получить доступ, как обычные свойства. Они получены из текущего состояния. Таким образом, currentPost
всегда дает вам выбранный пост, если установлен активный идентификатор. currentDescription
затем читает описание currentPost
. Вы можете получить доступ к этим свойствам так же, как обычные свойства состояния.
var app = new Vue({
el: '#main',
data() {
return {
posts: [{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
}, {
id: 2,
title: 'Post title 2',
description: 'Post description 2'
}, {
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}],
currentId: null
};
},
methods: {
setCurrentId(id) {
this.currentId = id;
}
},
computed: {
currentPost() {
if (this.currentId !== null) {
const currentPostInArray = this.posts.filter(post => {
return post.id === this.currentId;
});
if (currentPostInArray.length === 1) {
return currentPostInArray[0];
}
}
return null;
},
currentDescription() {
if (this.currentPost !== null) {
return this.currentPost.description;
}
return null;
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts" :class="{ active: post.id === currentId }">
<a @click="setCurrentId(post.id)">${ post.title }</a>
</li>
</ul>
</div>
<div id="item-description">{{ currentDescription }}</div>
Точно так же, как примечание на стороне: сохранение всего сообщения в виде копии в данных, а не только для идентификатора, не рекомендуется. Используя вычисленное свойство, вам не нужно беспокоиться об этом свойстве, оно всегда будет актуальным. Например, если вы измените массив posts
и удалите из него currentPost
выбранный пост, currentPost
приведет к нулевому значению, не обновив ничего. Или в случае изменения описания: Вычисленное свойство всегда дает вам правильный элемент (с обновленным описанием).
<div id="main">
<ul>
<li v-for="(post, index) in posts"><a @click="getPostData(post.description)">${ post.title }</a></li>
</ul>
</div>
methods: {
getPostData: function (postDesc) {
// you got the post Desc
}
}
test answer just for you, my little stack overflow scrapper