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