Question

我正在尝试构建

呈现表单的应用程序，其中默认输入值等于商店中的数据。

单击保存按钮时，将根据用户添加到视图中的新数据更新状态。

目前输入绑定到商店数据，所以我没有提及＆＃34; live＆＃34;输入值。当用户点击保存时，我如何抓住＆＃34; live＆＃34;值？

组件模板

<input type="text" class="form-control" :value="item.name">
<input type="text" class="form-control" :value="item.price">
<button class="btn btn-primary" v-on:click="updateItem(item)">Save</button>

组件

data: function() {
  return {}
},
methods: {
  updateItem(item) {
    this.$store.commit('updateItem', item);
  },
},
computed: {
  items() {
    return this.$store.getters.getItem;
  }
}

潜在解决方案

我想我也许可以创建一个＆＃34;克隆＆＃34;的存储，并将输入绑定到克隆的项目数据。然后这个对象将随着视图的变化而更新，因此我可以抓住那些＆＃34; live＆＃34;值，并将数据从视图提交到商店。这是一个好的解决方案吗？

Answer 1

如果您想在没有用户点击按钮的情况下进行更新，那么我建议one of the methods explained in the docs。

但是既然你想要点击按钮，那就试试这样：

<template>
    <form>
        <input type="text" class="form-control" v-model="item.name">
        <input type="text" class="form-control" v-model="item.price">

        <button class="btn btn-primary" @click.prevent="updateItem">Save</button>
    </form>
</template>

<script>
export default {
    data() {
        return {
            item: {
                name: null,
                price: null,
            }
        }
    },

    mounted() {
        // Set the default value of this.item based on what's in the store
        this.item = this.$store.getters.getItem
    },

    methods: {
        updateItem() {
            this.$store.commit('updateItem', this.item);
        }
    }
}
</script>

Vue和Vuex：根据视图的更改来更新状态

1 个答案: