如何在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

您的代码存在两个问题：

1. v-model只能与data一起使用，而不能与computed一起使用。除非值所依赖的值或其中一个值发生更改，否则无法更改Vue.js中的computed属性值。

2. 您无法直接更新状态。这是vuex规则之一。要更新它，你必须使用vuex变异。

所以解决方案是：

1. 创建一个名为data的{​​{1}}属性，并使用tempPageLimit将其绑定到输入。

2. 在v-model中，创建一个更新store的变体，其值为pageLimit，然后使用tempPageLimit将其映射到您的组件。

3. 在mapMutations方法中执行此突变。

如果你想阅读关于vuex突变的话，请查看here。