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

Question

У меня есть это приложение 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-descriptiondiv.

Как мне запрограммировать этот getPostData для получения описания элемента, на котором я щелкаю.

Tnx

Answer 1

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

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

---

Как примечание: вместо этого в записи хранится весь пост как копия в данныхпросто ID не рекомендуется.Используя вычисленное свойство, вам не нужно беспокоиться об этом свойстве, оно всегда будет актуальным.Например, если вы измените массив posts и удалите из него выбранный в данный момент пост, currentPost приведет к нулевому значению, без обновления чего-либо еще.Или в случае изменения описания: вычисляемое свойство всегда дает правильный элемент (с обновленным описанием).

Answer 2

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