从 v-link 获取数据属性

Question

当然这很容易，但目前我无法让它工作。我有一个名为 posts.vue 的组件，它在模板中包含此 link：

<template>
    <a v-link="{ name: 'post', params: { slug: post.post_name }}" v-postid="{ post.ID }"><h2>{{ post.post_title }}</h2></a>
</template>

我的路线是这样设置的：

'/post/:slug': {
    name: 'post',
    component: require('./components/post.vue')
}

现在我的问题是如何在路由匹配后加载的 post.vue 组件中获取 postid 数据属性。

在我以前的 jquery 日子里，我会这样做：

$('a.link').click(function() {
    var attr = $(this).data('post-id');
}

（只是为了展示我的意思）

感谢大家的帮助！ Vue.js 到目前为止很棒，非常喜欢它。

Answer 1

假设您的组件中有一个 post 对象，您在加载路由后使用 ajax 设置了该对象

data: function() {
  return {
    post: {}
  }
}

和

route: function() {
  data: function() {
    var resource = fetchPost(this.$route.params.slug)
    this.$set('post', resource)
  }
}

您可以像这样在组件的任何地方访问 post.id this.$data.post.id 不需要 v-postid 指令。

Get data attributes from v-link