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

【问题标题】：v-model not updating data when using a v-for in Vue在 Vue 中使用 v-for 时 v-model 不更新数据
【发布时间】：2016-11-12 19:28:39
【问题描述】：

我正在尝试构建一个基本的表单创建器，同时尝试学习 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>

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);
            }
        }
    });

【问题讨论】：

标签： vue.js

【解决方案1】：

嘿，我有你的问题。

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

<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 或 once 绑定类型修饰符。

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

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

希望这会有所帮助。

【讨论】：

谢谢。帮帮我。
酷。乐于助人:)