vue中保存时如何获取更新后的值

Question

在我的组件中，我从这样的状态中获得了一些道具：

computed: mapGetters({
      id: 'downloadId',
      pageLimit: 'pageLimit',
      pageMaxSize: 'pageMaxSize',
      cleaningInterval: 'cleaningInterval'
    })

我绑定属性:

<input type="number" v-model.number="pageLimit" id="pageMaxSize" />

保存方式：

methods: {
  onSave () {
    alert('Your data: ' + JSON.stringify(this.pageLimit))
  }
}

当在输入字段中输入一个值并单击保存按钮时，this.pageLimit 保持初始值

如何获取更新后的值？

Answer 1

您的代码有两个问题：

v-model 应仅与 data 一起使用，而不应与 computed 一起使用。 Vue.js 中的 computed 属性值无法更改，除非它所依赖的值或其中一个值已更改。
您不能直接更新状态。这是 vuex 规则之一。要更新它，您必须为此使用 vuex 突变。

所以解决方案是：

创建一个名为 tempPageLimit 的 data 属性并使用 v-model.
[=46= 将其绑定到输入]
在 store 中，创建一个突变，用 tempPageLimit 的值更新 pageLimit 并使用 [=20= 将其映射到您的组件].
在 onSave 方法中执行此变更。

如果您想了解 vuex 突变，请查看 here。

vue中保存时如何获取更新后的值

how to get the updated value when saving in vue

vue.js

vuejs2

vue-component

vuex