iT邦幫忙

第 12 屆 iThome 鐵人賽

0
Modern Web

Vue菜鳥的自我學習days系列 第 34

34.Form Handling

  • 分享至 

  • xImage
  •  

在strict mode使用 Vuex 时,在属于 Vuex 的 state 上使用 v-model 会有問題:

<input v-model="obj.message">

假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象,在用户输入时,v-model 会试图直接修改 obj.message。在strict mode中,由于这个修改不是在 mutation 中执行的, 会報錯。

用Vuex 的思维去解决这个问题的方法是:给<input>中绑定 value,然后侦听 input 或者 change 事件,在事件回调中调用一个方法:

<input :value="message" @input="updateMessage">
// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}
// ...
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

另一个方法是使用带有 setter 的双向绑定computed屬性:

<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

上一篇
33.Vuex項目結構
下一篇
35.Local Storage
系列文
Vue菜鳥的自我學習days39
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言