javascript - 从v-link获取数据属性

Question

当然这是一件简单的事情，但目前我无法让它发挥作用。我有一个名为 posts.vue 的组件，其中在模板中包含此链接:

<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 指令。