vue.js real time form not working with dynamic rows

Question

Hi there fellow stackers, I recently came upon a problem that is quite literally halting my progress on the entire project.

Let's get to it; What needs to be done?

Basically, I have a dynamic form saying Label and Internal Name. I have the section ready where you can click the add button to add a new label and internal name input in the table, however, that was just part 1.

Part 2 is that the internal name input is not filled independantly; it is a realtime form which is supposed to take the input placed in label. So if I type "Hello world" in label, there should automatically also be a "hello world" in the internal name input box without me having typed there at all.

As soon as I started combining two vue.js fiddles, things started to go wrong. These fiddles are:

Dynamic form: https://jsfiddle.net/7nxhygLp/

Realtime form: https://jsfiddle.net/gtmmeak9/118/

Here is the HTML code for my page where it is displayed (includes the vue.js)

=========================================================

<html>  
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>M06 Property-create</title>

    <!-- Including nessecary javascript sources -->
    <script src="https://unpkg.com/vue@next/dist/vue.js"></script>

</head>


{!! Form::open(array('route' => 'property.store')) !!}

@include('properties.form')

{!! Form::close() !!}

<a href="/property">Return</a>

<script> //This script handles the adding / removal of label/text fields upon clicking the add label / remove label button
    var Component1 = Vue.extend({
    template: 'Component 1: <input type="text" v-model="prop"/>',
            props: ['prop']
    });
    var Component2 = Vue.extend({
    template: 'Component 2: <input type="text" v-model="prop"/>',
            props: ['prop']
    });

    var app = new Vue({
    el: "#app",
        data: {
            rows: [
            {label: "", internal_name: ""}
            ]
        },
        components: {
            'comp1': Component1,
            'comp2': Component2
        }
        methods: {
            addRow: function () {
            this.rows.push({label: ""});
            },
        removeRow: function (index) {
                    //console.log(index);
                    this.rows.splice(index, 1);
                }
            }
    });
</script>

</body>
</html>

==========================================================

And here is the included form that at this moment is broken

==========================================================

{!! Form::label('field_type_id', Lang::get('misc.fieldtype_name')) !!}
{!! Form::select('field_type_id', $fieldTypes) !!}
<br>
<div class="dropdown box">
<div class="multi-field-wrapper">

    <div class="multi-fields">
        <div class="multi-field">

            <div id="app">
                <table class="table">
                    <thead>
                    <br>
                    <button type="button" class="button btn-primary" @click="addRow">Add label</button>
                    <br>
                    <tr>
                    <br>
                    <td><strong>Label</strong></td>
                    <td><strong>Internal Name</td>
                    </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(row, index) in rows">
                            <td><input name="label" id="label" type="text" v-model="row.label"></td>
                            <td><input name="internal_name" id="internal_name" type="text" v-model="row.internal_name"></td>
                            <td><button type="button" class="button btn-primary" @click="removeRow(index)">Remove</button></td>
                            <td><comp1: prop.sync="input"></comp1></td>
                            <td><comp2: prop.sync="input"></comp2></td>
                    </tr>
                    </tbody>
                </table>
            </div>    

        </div>
    </div>
</div>
</div>
<br>
{!! Form::label('property_group_id', Lang::get('misc.group_name')) !!}
{!! Form::select('property_group_id', $groups) !!}
<br>         
{!! Form::label('description', Lang::get('misc.description')) !!}
{!! Form::textarea('description', null, ['class' => 'form-control', 'required']) !!}
<br>
<br>
{!! Form::submit(Lang::get('misc.save'), ['class' => 'btn btn-success', 'id' => 'btn-save']) !!}

From your description, it sounds like the data you enter for "Component1" should be automatically set in "Component2" -- which it does in your fiddle. Could you clarify exactly what the problem is and how you want things to work? — PatrickSteele
Yes, let me share you the current page: prntscr.com/cwnipi . The problem thus far is that the components do not appear, therefore it is not working (as might be logical to see). In the end my goal is for an add button where a new row can be added that has a label and internal name field. Internal name's value is automatically "typed" in when something is typed in the Label box. Last but not least there is a remove button which would remove the associated table row that it belongs to. — Justin Boxem

Justin Boxem Justin Boxem · Accepted Answer · 2016-10-20T14:26:57

Okay I wish to provide an update on the situation; I worked a bit in JSFiddle and this is the outcome:

Now on JSFiddle it works fine; in my browser I get Vue.js warnings whenever I hit a key on my keyboard whilst entering in Label. That looks like: http://prntscr.com/cwp56f .

JSFiddle with these code snippets: https://jsfiddle.net/epdo2prz/

VIEW

<div id="app">
<table class="table">
<thead>
<tr>
  <td><strong>Label</strong></td>
  <td><strong>Internal Name</strong></td>
</tr>
</thead>
<tbody>
<tr v-for="row in rows">
  <td><comp1 :prop.sync="input"></comp1></td>
  <td><comp2 :prop.sync="input"></comp2></td>
  <td><a @click="removeRow(row)">Remove</a></td>
</tr>
  </tbody>
</table>
<div>
<button class="button btn-primary" @click="addRow">Add row</button>
</div>
</div>

MODEL

var Component1 = Vue.extend({
template: '<input type="text" v-model="prop"/>',
props: ['prop']
})

var Component2 = Vue.extend({
template: '<input type="text" v-model="prop"/>',
props: ['prop']
})

var app  = new Vue({
el: "#app",
data: {
rows: [
  {label: "",internal_name: ""}
]
},
methods:{
addRow: function(){
  this.rows.push({label:"",internal_name:""});
},
removeRow: function(row){
  //console.log(row);
  this.rows.$remove(row);
}
},
components: {
    'comp1': Component1,
  'comp2': Component2
}
});

vue.js real time form not working with dynamic rows

1 Answers