Question

我有以下模板：

<template>

    <div>
        <form @submit="save">

            <div class="field">
                <label class="label">Name</label>
                <div class="control">
                    <input class="input" type="text" placeholder="Name" :value="book.title">
                </div>
            </div>

            <div class="field">
                <label class="label">Name</label>
                <div class="control">
                    <input class="input" type="text" placeholder="Name" :value="book.author">
                </div>
            </div>

        </form>
    </div>

</template>

<script>

    export default {

        data() {
            return {
                book : {}
            }
        },
        methods: {
            save() {

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

    }

</script>

<style></style>

到目前为止，如果这本书通过了这个。$ store.state.book ，一切正常，但如果没有通过，则表单失败，并显示错误消息：

**渲染功能出错：＆＃34; TypeError：无法读取属性＆＃39; title＆＃39;未定义＆＃34; **

我认为传递空对象会动态绑定book对象并自动创建params。

是否可以使用相同的表格添加新内容和编辑？

Answer 1

我尝试了您的代码，所有您需要做的就是从'undefined'中删除'quotes'。显然，它是一个字符串，而不是js。

Vue 2 - 使用相同的表单添加新的和编辑

1 个答案: