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