在循环内访问 Vuejs 组件的变量参数

Question

我是 Vuejs 新手。我已经编写了一个用于删除确认模式的 vuejs 组件。我在记录列表中调用它，这是我的代码：

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code><template id="bs-modal">
    <div class="modal fade" id="confirmDeleteModal" tabindex="-1"
         role="dialog" aria-labelledby="confirmDeleteModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title"
                        id="confirmDeleteModalLabel">
                        Delete {{ item | capitalize }}
                    </h4>
                </div>
                <div class="modal-body">
                    Are you sure about deleting the {{ name }} {{ item }} ?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">No</button>
                    <button type="button" class="btn btn-primary"
                            v-on:click="deleteItem(id)">Yes</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
            }
        },
        props: ['item', 'name', 'id'],
        methods: {
            deleteItem : function(id) {
                var url           = window.location.href;
                var baseUrl       = url.substring(0,
                        url.indexOf('/', url.indexOf('://') + 3) + 1);
                var adminPosition = url.indexOf('admin/') + 6;
                var entity        = url.substring(adminPosition,
                                     url.indexOf('/', adminPosition));

                this.$http.delete(baseUrl + "admin/" + entity + "/" + id).then((response) => {
                    if (response.body.status_code == '200') {

                        // Calling just modal('hide') does not hide the backdrop
                        // There should be a better solution for this
                        $("#confirmDeleteModal").modal("hide");
                        $("#confirmDeleteModal").hide();
                        $('.modal-backdrop').hide();
                        $("body").removeClass("modal-open");

                        $("tr[data-id=" + id + "]").remove();

                        // Display success message
                    }
                });
            }
        },
        filters: {
            capitalize: function (value) {
                if (!value) {
                    return '';
                }
                value = value.toString();

                return value.charAt(0).toUpperCase() + value.slice(1);
            }
        }
    }
</script>

Answer 1

您需要使用v-bind when passing variables as props，如下所示

<confirm-delete-modal item="category" v-bind:id="{{ $category->id }}" v-bind:name="{{ $category->name }}"></confirm-delete-modal>

或者简而言之，您可以将 v-bind 替换为 : 为：

<confirm-delete-modal item="category" :id="{{ $category->id }}" :name="{{ $category->name }}"></confirm-delete-modal>

Answer 2

我认为为每条记录调用 confirm-delete-modal 是一种错误的方法。我将模态移到循环外并对代码进行了一些更改以解决问题：

这里是confirmDelete.vue的代码：

<template id="modal-template">
    <transition name="confirm-delete-modal">
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">

                    <div class="modal-header">
                        <slot name="header">
                            default header
                        </slot>
                    </div>

                    <div class="modal-body">
                        <slot name="body">
                            Are you sure about deleting the {{ this.$parent.item_name }} {{ item }} ?
                        </slot>
                    </div>

                    <div class="modal-footer">
                        <slot name="footer">
                            <button class="modal-default-button" @click="deleteItem();">
                                Yes
                            </button>
                            <button class="modal-default-button" @click="$emit('close')">
                                No
                            </button>
                        </slot>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        data () {
            return {
            }
        },
        props: ['item'],
        methods: {
             deleteItem : function() {
                 var url           = window.location.href;
                 var baseUrl       = url.substring(0, url.indexOf('/', url.indexOf('://') + 3) + 1);
                 var adminPosition = url.indexOf('admin/') + 6;
                 var entity        = url.substring(adminPosition, url.indexOf('/', adminPosition));

                 this.$http.delete(baseUrl + "admin/" + entity + "/" + this.$parent.item_id).then((response) => {
                     if (response.body.status_code == '200') {

                         $("tr[data-id=" + this.$parent.item_id + "]").remove();

                         this.$emit('close');
                         // Display success message
                     }
                 });
             }
         },
         filters: {
             capitalize: function (value) {
                 if (!value) {
                     return '';
                 }
                 value = value.toString();

                 return value.charAt(0).toUpperCase() + value.slice(1);
             }
         }
    }
</script>

这是 blade 模板：

    @foreach ($categories as $category)
        <tr data-id="{{ $category->id }}">
            <td>{{ $category->id }}</td>
            <td>{{ $category->name }}</td>
            <td id="actions">
                <a href="{{ url('admin/category/' . $category->id . '/get') }}">Show</a>
                <a href="{{ url('admin/category/' . $category->id . '/edit') }}">Edit</a>
                <a href="#" id="{{ $category->name }}_{{ $category->id }}" @click="setDeleteModal($event)">Delete</a>
            </td>
        </tr>
    @endforeach
    <confirm-delete-modal item="category"
                          v-if="showDeleteModal"
                          @close="closeDeleteModal">
        <h3 slot="header">Delete Category</h3>
    </confirm-delete-modal>

最后是 parent vue 实例的代码：

    new Vue({
        el: '#crud',
        data: {
            showDeleteModal: false,
            item_id: '',
            item_name: ''
        },
        methods: {
            setDeleteModal: function(e) {
                this.showDeleteModal = true;
                params               = e.target.id.split("_");
                this.item_id         = params[1];
                this.item_name       = params[0];
            },
            closeDeleteModal: function() {
                this.showDeleteModal = false;
            }
        }
    });

我希望这对其他人有帮助。

我很高兴知道 vuejs 专家的想法。

Answer 3

我认为主要问题来自所有组件的相同 ID，当您单击 link 第一个 ID 为 (confirmDeleteModal) 的元素时，将打开。

您可以像这样为每个组件设置一个唯一的 ID：

<div class="modal fade" :id="'confirmDeleteModal_'+id" tabindex="-1"
     role="dialog" aria-labelledby="confirmDeleteModalLabel">