在模态 vue 组件表单中绑定数据库表值

Posted 2023-02-22

技术标签:

【中文标题】在模态 vue 组件表单中绑定数据库表值【英文标题】：Bind database table values inside a modal vue component form 【发布时间】：2017-02-02 02:05:30 【问题描述】：

在我的 Laravel 5.3 应用程序中，我有一个模式组件，当用户单击按钮编辑数据时会显示该组件。

模态窗口的加载通过以下代码完成：

<a
    href="#"
    class="btn btn-sm btn-info"
    data-toggle="modal"
    data-target="#editCountryModal"
    data-country-id=" countries['id'] "
    data-country-code=" countries['code'] "
    data-country-name=" countries['name'] "
    data-country-currency-code=" countries['currency_code'] "
    data-country-currency-name=" countries['currency_name'] "
    data-country-display=" countries['display'] "
>
    <i class="fa fa-lg fa-pencil"></i>
</a>

上面的代码加载了模态组件中的以下表单。

<template>
    <div class="errors"></div>

    <form method="POST" @submit.prevent="updateCountry">
        <div class="form-group">
            <label for="name">Id:</label>
            <input
                type="text"
                name="id"
                id="countryId"
                class="inputText"
                autofocus="autofocus"
                placeholder="1"
                readonly="readonly"
                v-model="formData.countryId"
            />
        </div>

        <div class="form-group">
            <label for="name">Name:</label>
            <input
                type="text"
                name="name"
                id="name"
                class="inputText"
                placeholder="Eg. India"
                required="required"
                v-model="formData.name"
            />
            <div class="error">
                <span v-if="formErrors['name']" 
                      class="text-danger"
                >
                       formErrors['name'] 
                </span>
            </div>
        </div>

        <div class="form-group">
            <label for="code">Code:</label>
            <input
                type="text"
                name="code"
                id="code"
                class="inputText"
                placeholder="Eg. IND"
                required="required"
                v-model="formData.code"
            />
            <div class="error">
                <span v-if="formErrors['code']"
                      class="text-danger"
                >
                     formErrors['code'] 
                </span>
            </div>
        </div>

        <div class="form-group">
            <label for="currency_name">Currency Name:</label>
            <input
                type="text"
                name="currency_name"
                id="currency_name"
                class="inputText"
                placeholder="Eg. Indian National Rupee"
                required="required"
                v-model="formData.currency_name"
            />
            <div class="error">
                <span v-if="formErrors['currency_name']"
                      class="text-danger"
                >
                     formErrors['currency_name'] 
                </span>
            </div>
        </div>

        <div class="form-group">
            <label for="currency_code">Currency Code:</label>
            <input
                type="text"
                name="currency_code"
                id="currency_code"
                class="inputText"
                placeholder="Eg. INR"
                required="required"
                v-model="formData.currency_code"
            />
            <div class="error">
                <span v-if="formErrors['currency_code']"
                      class="text-danger"
                >
                     formErrors['currency_code'] 
                </span>
            </div>
        </div>

        <div class="form-group">
            <label for="display">Display:</label>
            <select name="display"
                    id="display" 
                    class="selectText" 
                    required="required" 
                    v-model="formData.display"
            >
                <option value="Disabled" selected="selected">Disabled</option>
                <option value="Enabled">Enabled</option>
            </select>
            <div class="error">
                <span v-if="formErrors['display']"
                      class="text-danger"
                >
                     formErrors['display'] 
                </span>
            </div>
        </div>

        <button type="submit" class="button button--teal">Edit</button>
    </form>
</template>
<script>
    export default 
        data() 
            return 
                formData: 
                    countryId: '',
                    name: '',
                    code: '',
                    currency_name: '',
                    currency_code: '',
                    display: ''
                ,
                formErrors: ,
                allCountries: []
            
        ,

        ready: function() 
            this.fetchAllCountries();
        ,

        methods: 
            notify: function(mType, mTitle, mMessage, nDelay) 
                $.iGrowl(
                    type: mType == 'success' ? 'success' : 'error',
                    title: mTitle,
                    message: mMessage,
                    icon: mType == 'success' ? 'steadysets-checkmark !' : 'feather-cross',
                    delay: nDelay,
                    animShow: 'bounceInRight',
                    animHide: 'bounceOutRight'
                );
            ,

            fetchAllCountries: function() 
                $.get('/api/all-countries', function(countries) 
                    this.allCountries = countries;
                .bind(this), 'json');
            ,

            updateCountry: function(e) 
                $('.button').addClass('button--disabled')
                            .html('<i class="fa fa-spinner fa-spin"></i> Editing...');
                $(document).find('i.fa.fa-spinner.fa-spin').show();

                this.$http
                    .post('/admin/settings/update-country/' + this.formData.countryId, this.formData)
                    .then((result) => 
                        var res = result.data;

                        $('.button').removeClass('button--disabled').html('Edit');
                        $(document).find('i.fa.fa-spinner.fa-spin').hide();

                        // 3000 is the number of seconds before disappearing
                        this.notify(res.status, res.title, res.message, 3000);
                    ,
                    (err) => 
                        $('.button').removeClass('button--disabled').html('Edit');
                        $(document).find('i.fa.fa-spinner.fa-spin').hide();

                        if ( err.status === 422 ) 
                            var errors = err.data;
                            this.formErrors = errors;

                        
                );

                return false;
            
        
    
</script>

发生的情况是，每当我提交上述表单时，它都会被提交而根本没有任何值。这意味着我得到了上面所有字段的空字符串。但是，如果我手动转到每个字段，它会以正确的字段值提交。

我希望每当用户单击提交按钮时，值都应该得到更新。这意味着不应该强迫用户点击每个字段，以便 vue 能够识别它。

编辑 1：

这就是我所说的模态：

@section('pageScripts')
    <script>
        $('#editCountryModal').on('show.bs.modal', function(e) 
            var link = $(e.relatedTarget);

            var id            = link.data('country-id');
            var name          = link.data('country-name');
            var code          = link.data('country-code');
            var currency_name = link.data('country-currency-name');
            var currency_code = link.data('country-currency-code');
            var display       = link.data('country-display');

            var modal = $(this);
            modal.find('.modal-title').html('Edit Country: ' + name);
            modal.find('.modal-body #countryId').val(id);
            modal.find('.modal-body #name').val(name);
            modal.find('.modal-body #code').val(code);
            modal.find('.modal-body #currency_name').val(currency_name);
            modal.find('.modal-body #currency_code').val(currency_code);
            modal.find('.modal-body #display').val(display);
        );

    </script>
@endsection

底线问题：如果用户只是点击提交按钮，我如何提交表单的默认值（加载在模态窗口中）？

非常感谢任何帮助。谢谢。

【问题讨论】：

我认为您使用的是 bootstrap modal，而不是 vuestrap modal 组件，如果您使用的是 bootstrap modal，那么您可以使用诸如显示.bs.modal 之类的模态事件并使用 Vue.$set(key, value) 以编程方式在您的 v-model 变量中设置值。是的，我正在使用引导模式。怎么可能呢？请您指导我吗？？能否提供你的js代码？ @El_Mateella 我已经编辑了问题.. 【参考方案1】：

您正在使用 Jquery 和 Vue 的组合，这可能会导致兼容性问题，因为 Jquery 无法访问 Vue 内部对象结构。正如 Sam 所说，VueStrap 将是寻找重构的好地方。

另一种选择是存储 Vue 根并使用 $broadcast 向您的表单发送一个事件，该事件将数据传播到模型而不是设置 dom 对象值。

@section('pageScripts')
    <script>
        $('#editCountryModal').on('show.bs.modal', function(e) 
            var object = 
                countryId:      link.data('country-id'),
                name:           link.data('country-name'),
                code:           link.data('country-code'),
                currency_name:  link.data('country-currency-name'),
                currency_code:  link.data('country-currency-code'),
                display:        link.data('country-display')
            ;

            window.Vm.$broadcast('fillModal', object);
        );
    </script>
@endsection

window.Vm 是您全局存储的根节点，因此您的 vue 初始化将转到 window.Vm = new Vue(...)

你的组件结构应该是这样的：

<script>
    export default 
        data() 
            return 
                formData: 
                    countryId: '',
                    name: '',
                    code: '',
                    currency_name: '',
                    currency_code: '',
                    display: ''
                ,...
            
        ,
        ready: function() ...,
        methods: ...,
        events: 
            "fillModal": function(object)
                this.formData = object;
            
        
    
</script>

【讨论】：

好吧，我使用了你的代码，即使将 app.js 文件内容从 const app = new Vue( el: 'body' ); 更改为 var Vm = new Vue( el: 'body' );，我也得到了 Uncaught ReferenceError: Vm is not defined app.js 的脚本标签是在 @yield('pageScripts') 刀片指令之前还是之后？它位于页面末尾</body> 标记之前。 app.js 需要在其他代码之前或在两者上将其从 Vm 更改为 window.Vm 以使您的根元素全局化。如果少做，不是最好的主意，但也不是最坏的。 window.Vm 帮了我大忙...感谢您的解决方案。请更新答案，以便我可以将其标记为已接受...

以上是关于在模态 vue 组件表单中绑定数据库表值的主要内容，如果未能解决你的问题，请参考以下文章