【element-ui】element-ui的el-input从vuex的state中获取value值后，输入框无法编辑？

我想在el-input框中输入值，然后监听变化并传到state中，一开始使用的是@change，但是没有变化。看了文档后改用input，但是无法改变文本框的内容，代码如下：

<el-input placeholder="请输入内容" class="td-input" :value="inputValue" @input.native="handleInputChange"></el-input>
export default {
  name: 'app',
  data () {
    return {}
  },
  created () {
    this.$store.dispatch('getList')
  },
  computed: {
    ...mapState(['list', 'inputValue'])
  },
  methods: {
    handleInputChange (e) {
      console.log(e.target.value)
    }
  }
}

value值是绑定在vuex的的state中的

export default new Vuex.Store({
  state: {
    list: [],
    inputValue: 'test'
  },
  mutations: {
    initList (state, list) {
      state.list = list
    },
    setInputValue (state, val) {
      state.inputValue = val
    }
  },
  actions: {
    getList (context) {
      axios.get('/list.json').then(({ data }) => {
        context.commit('initList', data)
      })
    }
  },
  modules: {
  }
})

输入数字的时候console.log还是原来的内容，但是输入输入拼音的时候可以监听到变化。
页面截图
image

回答：

因为你没有改变state中inputValue的值呀

handleInputChange (e) {
      console.log(e.target.value)
    this.$store.commit('setInputValue',e.target.value)
}

回答：

大佬再帮忙看下，我遇到一个比较奇怪的现象，修改后，在chrome和edge浏览器上输入框依旧无法输入或者删除内容，而firefox可以删除和输入数字、但是无法输入中文，这是什么原因？
image

以上是 【element-ui】element-ui的el-input从vuex的state中获取value值后，输入框无法编辑？ 的全部内容， 来源链接： utcz.com/a/152689.html

回到顶部