Vue.js：入力への双方向バインディング値

Question

モデルにバインドしてヘッダ値を変更しようとしています。

ここ

<template> 
    <input id="token" type="text" v-model='tokenId'> 
    <label for="token">Vault Token</label> 
</template> 

<script> 
    export default { 
    data() { 
     return { 
     tokenId: this.$http.headers.common['X-Vault-Token'] 
     } 
    } 
    } 
</script> 

tokenIdは、正しい値を持っていますが、私はinputからそれを変更した場合、それは$http.headers.common['X-Vault-Token']には影響を与えません。

私は$watchを使用することを考えていますが、ここでそれを使用する方法はありますか？

Answer 1

tokenId以外のものには影響しません。これは、モデルに使用している変数です。

なぜ

<input id="token" type="text" v-model='tokenId' @change="changeToken"> 

と

methods: { 
    changeToken (e) { 
    this.$http.headers.common['X-Vault-Token'] = e.target.value 
    } 
}