Question

你好伙伴们，我最近遇到了一个问题，这个问题严重阻碍了我在整个项目上的进展。

让我们来看看;需要做什么？

基本上，我有一个动态表格，上面写着标签和内部名称。我准备好了部分，您可以单击添加按钮在表格中添加新标签和内部名称输入，但这只是第1部分。

第2部分是内部名称输入没有独立填写;它是一个实时表单，应该将输入放在标签中。所以，如果我键入＆＃34; Hello world＆＃34;在标签中，应该还会自动成为一个'＃34; hello world＆＃34;在内部名称输入框中，我根本没有输入。

一旦我开始组合两个vue.js小提琴，事情就开始出错了。这些小提琴是：

动态表单：https://jsfiddle.net/7nxhygLp/

实时表单：https://jsfiddle.net/gtmmeak9/118/

以下是我的页面显示的HTML代码（包括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>

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

此处包含的内容目前已被破坏

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

{!! 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']) !!}

Answer 1

好的，我想提供有关情况的最新消息;我在JSFiddle工作了一下，这就是结果：

现在JSFiddle上运行正常;在我的浏览器中，每当我在键盘上按下键盘上的键时，我都会收到Vue.js警告。看起来像是：http://prntscr.com/cwp56f。

JSFiddle包含以下代码段： https://jsfiddle.net/epdo2prz/

查看

<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实时表单不使用动态行

1 个答案: