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-description div中显示该项目的描述。

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

Tnx

Answer 1

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

Answer 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方法获取数据。

编辑：

存储帖子的ID也可能比描述本身更好。在这种情况下，您不仅可以访问描述，还可以访问整个帖子。然后，您还可以检查当前的<li>是否处于活动状态，依此类推。这是一个例子。在示例中，我使用了计算属性，然后可以像常规属性一样访问这些属性。它们是从当前状态派生的。因此，如果设置了有效ID，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将导致为空值，而不更新其他任何内容。或在更改描述的情况下：计算属性始终为您提供正确的项目（具有更新的描述）。

点击详情上的Vue列表项

2 个答案: