Javascript 单击“详细信息”时的Vue列表项

我有这个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) {

      }
  }
});

---

${post.title}

点击项目的描述如下 我想单击列表中的一个项目，并在#项目描述div中显示该项目的描述

如何编程此getPostData以从单击的项目中获取描述

Tnx

${post.title}

方法：{
getPostData:函数（postDesc）{
//你得到了职位描述
}
}

您需要以某种方式存储当前选定的项目或描述。您可以通过从模板中调用一个方法来实现这一点，并将该项作为参数传递。例如，像这样：

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

---

---

${post.title}


{{currentDescription}}

---

---

作为旁注：不建议将整个帖子作为副本存储在数据中，而不仅仅是ID。通过使用计算属性，您不必担心这个属性，它总是最新的。例如，如果更改

posts

数组并从中删除当前选定的post，则

currentPost

将导致空值，而不更新任何其他内容。或者在更改描述的情况下：computed属性始终为您提供正确的项（以及更新的描述）。

请您描述哪些项没有按预期工作？如果您添加到目前为止尝试的代码，了解哪些项没有工作将非常有用，因为现在一切都正常。但我如何编程这个getPostData以从我单击的项目中获取描述，我有一个或多个问题。我在

项中添加了活动类。TnxI添加了第二个更合适的示例。我正在存储当前的帖子ID，而不是描述。然后，您始终可以访问完整的动态帖子。然后，您还可以检查它是否是活动的

。见上文。Tnx很多。我是Vue的新手。

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

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>

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>