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