Html vue.js不删除行_Html_Vue.js_Blade

Html vue.js不删除行

html vue.js

Html vue.js不删除行,html,vue.js,blade,Html,Vue.js,Blade,我正忙着使用Vue.js制作一个动态表单，目前看来，除了删除功能外，我的一切都是正确的。据我所知，所有配置都是正确的，但我浏览器中的控制台显示错误“this.rows.$remove不是一个函数” 有人知道这个问题的解决方案吗，或者可以帮我找到解决方案吗？提前谢谢 ====================================== 以下是显示表单的页面的HTML: <html> <head> <meta charset="utf-8">

我正忙着使用Vue.js制作一个动态表单，目前看来，除了删除功能外，我的一切都是正确的。据我所知，所有配置都是正确的，但我浏览器中的控制台显示错误“this.rows.$remove不是一个函数”

有人知道这个问题的解决方案吗，或者可以帮我找到解决方案吗？提前谢谢

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

以下是显示表单的页面的HTML:

<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 app = new Vue({
        el: "#app",
        data: {
            rows: [
                {name: ""}
            ]
        },
        methods: {
            addRow: function () {
                this.rows.push({name: ""});
            },
            removeRow: function (row) {
                console.log(row);
                this.rows.$remove(row);
            }
        }
    });
</script>

</body>
</html>

{!! Form::label('label', Lang::get('misc.label')) !!}
{!! Form::text('label', null, ['class' => 'form-control', 'required']) !!}
<br>
{!! Form::label('internal_name', Lang::get('misc.internal_name')) !!}
{!! Form::text('internal_name', null, ['class' => 'form-control', 'required']) !!}
<br>
{!! Form::label('field_type_id', Lang::get('misc.fieldtype_name')) !!}
{!! Form::select('field_type_id', $fieldTypes) !!}

<div class="dropdown box">
<div class="multi-field-wrapper">

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

            <div id="app">
                <table class="table">
                    <thead>
                    <button type="button" class="button btn-primary" @click="addRow">Add label</button>

                    <tr>
                        <td><strong>Label</strong></td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in rows">
                            <td><input type="text" v-model="row.name"></td>
                            <td><button type="button" class="button btn-primary" @click="removeRow(row)">Remove</button></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']) !!}


M06属性创建
{！！Form:：open（数组（'route'=>'property.store'））
@包括（'properties.form'）
{！！Form:：close（）！！}
//单击“添加标签/删除标签”按钮后，此脚本将处理标签/文本字段的添加/删除
var app=新的Vue({
el:“应用程序”，
数据：{
行：[
{名称：}
]
},
方法：{
addRow:函数（）{
this.rows.push（{name:}）；
},
移除方式：功能（行）{
控制台日志（行）；
此.rows.$remove（row）；
}
}
});

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

这里是包含的表单本身的HTML/Blade:

<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 app = new Vue({
        el: "#app",
        data: {
            rows: [
                {name: ""}
            ]
        },
        methods: {
            addRow: function () {
                this.rows.push({name: ""});
            },
            removeRow: function (row) {
                console.log(row);
                this.rows.$remove(row);
            }
        }
    });
</script>

</body>
</html>

{!! Form::label('label', Lang::get('misc.label')) !!}
{!! Form::text('label', null, ['class' => 'form-control', 'required']) !!}
<br>
{!! Form::label('internal_name', Lang::get('misc.internal_name')) !!}
{!! Form::text('internal_name', null, ['class' => 'form-control', 'required']) !!}
<br>
{!! Form::label('field_type_id', Lang::get('misc.fieldtype_name')) !!}
{!! Form::select('field_type_id', $fieldTypes) !!}

<div class="dropdown box">
<div class="multi-field-wrapper">

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

            <div id="app">
                <table class="table">
                    <thead>
                    <button type="button" class="button btn-primary" @click="addRow">Add label</button>

                    <tr>
                        <td><strong>Label</strong></td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in rows">
                            <td><input type="text" v-model="row.name"></td>
                            <td><button type="button" class="button btn-primary" @click="removeRow(row)">Remove</button></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']) !!}

{！！Form:：label（'label'，Lang:：get（'misc.label'））
{！！Form:：text（'label'，null，['class'=>'Form control'，'required']）


{！！Form:：label（'internal_name'，Lang:：get（'misc.internal_name'））
{！！Form:：text（'internal_name'，null，['class'=>'Form control'，'required']）


{！！Form:：label（'field\u type\u id'，Lang:：get（'misc.fieldtype\u name'））
{！！表单：：选择（'field\u type\u id'，$fieldTypes）
添加标签
标签
去除


{！！Form:：label（'property\u group\u id'，Lang:：get（'misc.group\u name'））
{！！Form:：select（'property\u group\u id'，$groups）


{！！Form:：label（'description'，Lang:：get（'misc.description'））
{！！Form:：textarea（'description'，null，['class'=>'Form control'，'required']）




{！！Form:：submit（Lang:：get（'misc.save'），['class'=>'btn btn success'，'id'=>'btn save']）

在vue 2.0中，

$remove

方法似乎已被弃用，因此我假设您正在使用该方法。您将需要改用拼接：

HTML:

你可以在这里看到小提琴：

参考指南，然后发现它已被弃用，这真让人恼火

无论如何，我发现这是一个不推荐或不推荐的参考。

成功了。非常感谢@craig_h！另外，是否可以通知vue.js他们的过期指南？因为我从他们的网站指南中得到了$remove。（2.0版）