Reference/Use property in other options of the same Vue component

Question

I am using vue-resource to perform CRUD on resources e.g. article tags. For CUD, I need to send a csrf token along with data. My server side code accepts a custom HTTP header 'X-CSRF-TOKEN' and check its value.

I make a tag component for each entry of tags. The csrf token comes from root instance and is binded to tag component, like so:

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

and here is the template

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

According to vue-resource docs, I can set custom header like this: Vue.http.headers.common['X-CSRF-TOKEN'] = token; I can also preset this header in component settings.

The code below is what I want to achieve:

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

The question is, how may I use prop in other component options?

Thank you.

Answer 1

Don't use prop, it's not necessary in your case.

If you really do want to use prop, you can put them in a global variable.