Question

我在尝试学习Vue时正在尝试构建一个基本的表单创建器。我遇到的问题是我的v-model没有更新数据。我们的想法是你可以添加一种字段，它会将它添加到顶部的表单预览区域。还有一个部分可以编辑该输入的数据。目前我只有每个输入的标签，它会将正确的数据加载到输入框中，但如果我更改它，实际数据对象中没有任何变化。

认为这是一个反应性问题，但仍然试图解决它。

它的JSbin。 http://jsbin.com/qudanosusa/edit?html,js,output

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Form Builder</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/app.css">

</head>
<body>
<div class="container">

    <div class="row" id="app">

        <div class="col-md-8">
            <form class="form-horizontal">
                <my-component :showname="element.showname" :type="element.type" :name="element.name" :count="vm.count" v-for="element in elements"></my-component>
                <pre>{{ $data | json }}</pre>
                </form>
        </div>

        <div class="col-md-4">
            <div id="add_buttons">
                <p>
                <button @click="add_text_input" class="btn btn-primary">New Text Input Field</button>
                </p>
                <p>
                <button @click="add_text_area_input" class="btn btn-primary">New Text Area Field</button>
                </p>
            </div>
            <div id="features" class="row">
                <my-features :showname="element.showname" :type="element.type" :name="element.name" :count="vm.count" v-for="element in elements"></my-features>
            </div>
        </div>


    </div>

</div>
<template id="my-form">
    <div v-if="type == 'text'" class="form-group">
        <label v-bind:for="name" class="col-md-3 control-label">{{ showname }}:</label>
        <div class="col-md-8">
            <input type="text" v-bind:name="name" class="form-control">
        </div>
        <div class="col-md-1">
            <button class="btn" v-on:click="edit('element')">Edit</button>
        </div>
    </div>

    <div v-if="type == 'textarea'" class="form-group">
        <label v-bind:for="name" class="col-md-3 control-label">{{ showname }}:</label>
        <div class="col-md-9">
            <textarea v-bind:name="name" class="form-control"></textarea>
        </div>
    </div>
</template>

<template id="my-features">
    <div v-if="type == 'text'" class="form-group">
        <label v-bind:for="name" class="col-md-3 control-label">Label:</label>
        <div class="col-md-9">
            <input type="text" v-model="showname">
        </div>
    </div>

    <div v-if="type == 'textarea'" class="form-group">
        <label v-bind:for="name" class="col-md-3 control-label">{{ showname }}:</label>
        <div class="col-md-9">
            <textarea v-bind:name="name" class="form-control"></textarea>
        </div>
    </div>
</template>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.min.js"></script>
<script>

</script>
</body>
</html>

JS

var vm = new Vue({
        el: "#app",

        data: {
            elements: [{
                "name": "first_name",
                "showname": "First Name",
                "type": "text",
                "required": "false",
                "fee": "0",
                order: "1"
            }],
            count: 1
        },

        components: {
            'my-component': {
                template: '#my-form',
                props: ['showname', 'type', 'name', 'order']
            },
            'my-features': {
                template: '#my-features',
                props: ['showname', 'type', 'name', 'order']
            }

        },

        methods: {
            add_text_input: function () {
                vm.count ++;
                var array = {
                    name: "last_name",
                    showname: "Last Name",
                    type: "text",
                    required: "false",
                    fee: "0",
                    order: vm.count
                };
                this.elements.push(array);
            },
            add_text_area_input: function () {
                vm.count ++;
                var array = {
                    name: "last_name",
                    showname: "Last Name",
                    type: "textarea",
                    required: "false",
                    fee: "0",
                    order: vm.count
                };
                this.elements.push(array);
            },
            edit: function(element) {
                console.log(element);
            }
        }
    });

Answer 1

嘿，我遇到了你的问题。

这只是一个非常简单的问题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="timer1"></div>
<div id="timer2"></div>

因此，在您的组件中添加<my-component :showname="element.showname" :type="element.type" :name="element.name" :count="vm.count" v-for="element in elements"> </my-component>以启用双向绑定。

sync

在这里你可以看到我添加了<my-component :showname.sync="element.showname" :type="element.type" :name="element.name" :count="vm.count" v-for="element in elements"> </my-component>，它启用了双向绑定。

默认情况下，当父项属性更新时，它会向下流向其子项，但不会反向。您必须添加showname.sync或sync绑定类型修饰符。

这是链接 https://vuejs.org/guide/components.html#Prop-Binding-Types

这是jsBin http://jsbin.com/mitojijaya/1/edit?html,js,output

希望这有帮助。

v-model在Vue中使用v-for时不更新数据

1 个答案: