Элемент списка Vue в деталях кликов

Вам нужно как-то сохранить выбранный элемент или описание. Вы можете сделать это, вызвав метод из вашего шаблона, передав элемент в качестве параметра. Например, вот так:

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
   }
 }