Referenz/Eigenschaft in anderen Optionen derselben Vue-Komponente verwenden

Question

Ich verwende vue-resource, um CRUD auf Ressourcen auszuführen, z. Artikel-Tags. Für CUD muss ich ein csrf-Token zusammen mit Daten senden. Mein serverseitiger Code akzeptiert einen benutzerdefinierten HTTP-Header 'X-CSRF-TOKEN' und überprüft seinen Wert.

Ich mache eine Tag-Komponente für jeden Eintrag von Tags. Die csrf Token von Rootinstanz kommt und binded Komponente zu markieren, etwa so:

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

und hier ist die Vorlage

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

Nach vue-Ressource docs, kann ich benutzerdefinierte wie dieser Header : Vue.http.headers.common ['X-CSRF-TOKEN'] = Token; Ich kann diesen Header auch in den Komponenteneinstellungen voreinstellen.

Der folgende Code ist das, was ich erreichen will:

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

Die Frage ist, wie kann ich verwenden Stütze in einer anderen Komponente Optionen?

Vielen Dank.

Answer 1

Verwenden Sie keine Stütze, es ist in Ihrem Fall nicht notwendig.

Wenn Sie wirklich prop verwenden möchten, können Sie sie in eine globale Variable einfügen.