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