Vue 2 Vuex - 通过表单更新值或添加新项目

Question

我有以下模板：

<template>

    <div class="is-half">
        <form @submit.prevent="save">

            <input type="hidden" name="bookID" :value="book.id">
            <div class="field">
                <label class="label">Title</label>
                <div class="control">
                    <input class="input" type="text" placeholder="Title" :value="book.title">
                </div>
            </div>

            <div class="control">
                <div class="select">
                    <select>
                      <option
                        v-for="author in this.$store.state.authors"
                        :value="author.name"
                        :selected="author.name == book.author"
                        >{{ author.name }}</option>
                    </select>
                </div>
            </div>

            <div class="field">
                <label class="label">Description</label>
                <div class="control">
                    <textarea class="textarea" placeholder="Description" :value="book.description"></textarea>
                </div>
            </div>

            <div class="control">
                <button class="button is-primary">Submit</button>
            </div>

        </form>
    </div>

</template>

<script>

    export default {

        data() {
            return {
                book : {
                    id: null,
                    title: '',
                    isbn: '',
                    author: '',
                    description: '',
                    added: ''

                }
            }
        },
        methods: {
            save(book) {
                console.log(this.book);
            }
        },
        created() {

            if(this.$store.state.book != 'undefined'){
                this.book = Object.assign({}, this.$store.state.book);
            }
        },
        computed: {}

    }

</script>

<style></style>

我正在尝试更新所选项目的值，但每当我按保存时，该对象的值与加载时的值相同。如果我加载新对象，我如何更新值，或者如果 id 为空，我如何插入新对象？

Answer 1

如果我理解你的问题，问题是当你在输入中输入内容时，它不会更新模型。

问题是您正在使用 :value 绑定值，这是一种单向绑定。对于 2 路绑定，将所有 :value 替换为 v-model：v-model="book.title"

Vue 2 Vuex - 通过表单更新值或添加新项目

Vue 2 Vuex - update values via form or add new item

vue.js

vuejs2

vuex