Question

我正在使用vue-resource对资源执行CRUD，例如文章标签。对于CUD，我需要发送一个csrf令牌和数据。我的服务器端代码接受自定义HTTP标头＆＃39; X-CSRF-TOKEN＆＃39;并检查它的价值。

我为每个标签条目创建一个标签组件。 csrf令牌来自根实例，并绑定到标记组件，如下所示：

<tr v-for="tag in tags" is="tag" :tag="tag" :token="token"></tr>

这是模板

<template id="tag-template">
    <tr>
    <td>@{{ tag.id }}</td>
    <td>@{{ tag.name }}</td>
    <td>
        <button type="button" class="btn btn-xs btn-outline green">Edit</button>
        <button type="button" class="btn btn-xs btn-outline red" @click="deleteTag(tag,token)">Delete</button>
    </td>
    </tr>
</template>

根据vue-resource文档，我可以像这样设置自定义标题：Vue.http.headers.common [＆＃39; X-CSRF-TOKEN＆＃39;] = token;我也可以在组件设置中预设此标题。

以下代码是我想要实现的目标：

Vue.component('tag', {
    props: ['tag', 'token'],
    template: '#tag-template',
    methods: {
        deleteTag: function (tag, token) {
            // I don't want to repeat this line in my updateTag(), createTag() etc.
            Vue.http.headers.common['X-CSRF-TOKEN'] = token;
            this.$http.delete('/api/tags/' + tag.id).then(
                function () {
                    vm.tags.$remove(tag);
                },
                function () {}
             );
         }
    },
    http: {
        headers: {
            // how to reference/use prop 'token' here?
            'X-CSRF-TOKEN': 'token from prop list'
        }
    }
});

问题是，我如何在其他组件选项中使用prop？

谢谢。

Answer 1

不要使用道具，在你的情况下没有必要。

如果你真的想使用道具，你可以把它们放在一个全局变量中。

在同一Vue组件的其他选项中引用/使用属性

1 个答案: