Ссылка/использование свойства в других параметрах того же компонента Vue

Я использую vue-resource для выполнения CRUD на ресурсах, например. теги статей. Для CUD мне нужно отправить токен csrf вместе с данными. Мой серверный код принимает пользовательский HTTP-заголовок «X-CSRF-TOKEN» и проверяет его значение.

Я делаю компонент тега для каждой записи тегов. Токен 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['X-CSRF-TOKEN'] = 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 в других опциях компонента?

Спасибо.


vue.js vue-resource
person Carter    schedule 13.07.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Не используйте prop, в вашем случае это не нужно.

Если вы действительно хотите использовать prop, вы можете поместить их в глобальную переменную.

person gurghet    schedule 13.07.2016
comment
Итак, как я могу ссылаться на поле данных корневого экземпляра в моем компоненте, особенно в других объектах параметров? Я пробовал что-то вроде 'X-CSRF-TOKEN': vm.token, но не повезло. (Я назначаю корневой экземпляр переменной vm.) - person Carter; 14.07.2016
comment
Как сказано, сделайте глобальную переменную - person gurghet; 14.07.2016