Javascript boostrap模式未使用vue js v2双向绑定更新_Javascript_Jquery_Twitter Bootstrap_Laravel_Vue.js

Javascript boostrap模式未使用vue js v2双向绑定更新

javascript jquery twitter-bootstrap laravel vue.js

Javascript boostrap模式未使用vue js v2双向绑定更新,javascript,jquery,twitter-bootstrap,laravel,vue.js,Javascript,Jquery,Twitter Bootstrap,Laravel,Vue.js,我是vue js新手，尝试将其与引导模式结合使用以查看更多数据。我的场景是一个包含多条记录的表和一个按钮，用于在引导模式中查看所单击记录的详细信息。单击第一个按钮后，它将缓存并不会更新它，同时为不同的详细信息选择另一个按钮有人知道我做错了什么吗（它是Laravel、jQuery和VueJS的组合） HTML表格： <table class="table table-striped"> <thead> <tr> <th>E

我是vue js新手，尝试将其与引导模式结合使用以查看更多数据。我的场景是一个包含多条记录的表和一个按钮，用于在引导模式中查看所单击记录的详细信息。单击第一个按钮后，它将缓存并不会更新它，同时为不同的详细信息选择另一个按钮

有人知道我做错了什么吗

（它是Laravel、jQuery和VueJS的组合）

HTML表格：

<table class="table table-striped">
<thead>
    <tr>
        <th>E-mail address</th>
        <th>Status</th>
        <th>Sent at</th>
        <th>Expires in</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="v-align-middle">
            john@doe.example
        </td>
        <td class="v-align-middle">
            <span class="label label-default">
                pending
            </span>
        </td>
        <td class="v-align-middle">
            2017-06-05 17:59:15
        </td>
        <td class="v-align-middle">
            29 days
        </td>
        <td>
            <div class="btn-group pull-right">
                <a href="#" class="btn btn-default" data-toggle="modal" data-target="#inviteDetailsModal" data-email="john@doe.example">
                    <i class="fa fa-eye"></i>
                </a>
            </div>
        </td>
    </tr>
    <tr>
        <td class="v-align-middle">
            jane@doe.example
        </td>
        <td class="v-align-middle">
            <span class="label label-default">
                pending
            </span>
        </td>
        <td class="v-align-middle">
            2017-06-05 13:27:25
        </td>
        <td class="v-align-middle">
            29 days
        </td>
        <td>
            <div class="btn-group pull-right">
                <a href="#" class="btn btn-default" data-toggle="modal" data-target="#inviteDetailsModal" data-email="jane@doe.example">
                    <i class="fa fa-eye"></i>
                </a>
            </div>
        </td>
    </tr>
</tbody>

引导模式：

<div class="modal fade slide-up" id="inviteDetailsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content-wrapper">
        <invite-details inline-template>
            <div class="modal-content" id="details">
                <div class="modal-header clearfix text-left">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="pg-close fs-14"></i>
                    </button>
                    <h5>
                        Invite details for <span class="semi-bold">@{{ email }}</span>
                    </h5>
                    <p class="p-b-10">
                        <span data-tooltip="true" data-placement="bottom" title="token">
                            <em>@{{ token }}</em>
                        </span>
                    </p>
                </div>
                <div class="modal-body">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Sent at</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="log in logs">
                            <td>@{{ log.number }}</td>
                            <td>@{{ log.sentAt }}</td>
                            <td>@{{ log.status }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer text-center">
                    <span class="hint-text">
                        <em>expires in <strong>@{{ expires }}</strong> days</em>
                    </span>
                </div>
            </div>
        </invite-details>
    </div>
</div>


邀请有关@{{email}的详细信息

@{{token}}

#
寄往
地位
@{{log.number}
@{{log.sentAt}
@{{log.status}}
在@{expires}天内到期

由于您使用的是一个模态组件，并试图根据单击的表中的特定按钮更改其内容，因此当组件最初安装时，

挂载的

钩子只会触发一次

您想要的是每次显示模式时更新内容

首先，您的组件似乎只需要一封

电子邮件

道具。将其余的道具移动到组件的

data

方法中，因为（我假设）它们没有被传递到组件中：

props: ['email'],
data: function() {
  return {
    token: null,
    logs: null,
    expires: null,
  }
}

然后，我将创建一个名为

fetchData

的新方法，以放入

$http.get

调用：

fetchData: function() {
  this.$http.get('http://localhost:2000/system/invites/' + this.email + '/details')
    .then(response => {
      this.update(response.body);
    }, response => {
      console.log('whoops something went wrong');
    });
}

在模态组件的

mounted

hook中，使用jQuery向引导模态的

show

事件添加侦听器。并确保在销毁之前删除组件的

钩子中的侦听器：
mounted() {
  $(this.$el).on('shown.bs.modal', this.fetchData);
}, 
beforeDestroy() {
  $(this.$el).off('shown.bs.modal', this.fetchData);
}

现在，每当模式的show
事件触发时，$http.get
请求将基于组件的email
属性的当前值触发
好吧，为了让这项工作顺利进行，我进行了深入的研究，并付出了额外的努力，因为你提到你在VueJS是新手。我在您的代码中认识到了我以前的自我，您以JQuery的心态进入VueJS；-）
删除完整代码之前的前几个快速注释：

使用表DB行的整数ID到处引用用户。
这样，当电子邮件被更新时，您仍然知道电子邮件中的用户
前端。通过检查代码，我发现电子邮件可以更改
（因为它是可更新的数据属性，但也用于
您的GET
请求：baseUrl+'/system/invests/'+电子邮件+
“/详细信息”

随后，您可以使用此ID轻松生成唯一实例
您的模态：-）这是您希望使用VueJS的方式
由于您在多个位置使用相同的数据，请查看
一家商店的Vuex。一开始可能会让人望而生畏，但有一次会很棒
你得好好对付它。在您的情况下，相同的数据集
用于原始表和模态。如果有人更新，
一切更新
使用Vuex，您可以在任何地方触发更新。现在数据
每次单击“眼睛”按钮时更新。然而，这是
我已经将按钮作为modal模板的一部分，
每次单击它时，它都会调用fetchData（）（检查
控制台）。理想情况下，您希望使用Vuex并生成
从单一真理点数据集的所有内容。目前，如果
modal的数据已更新，而原始表未更新
使用VueJS，创建自己的模式同样容易。好处
这减少了代码中的开销，因为您可以使用v-if，因此
除非实际需要，否则不会加载到DOM中。判断
从当前代码中，将单击“详细信息”按钮
偶尔
如果尚未安装VueJS调试器，请安装：
,
它会帮助你“看到”引擎盖下的东西

好了，现在来看看代码！首先，将此行添加到您的app.js
文件中：
import JaimyTable from './components/stackoverflow/JaimyTable.vue'

就在var-app=new-Vue（{
行）的正上方，并将其添加到您的组件中，这样您就可以得到如下结果：
import JaimyTable from './components/stackoverflow/JaimyTable.vue'

var app = new Vue({

    components: {
        JaimyTable,
    },

});

以下是JaimyTable.vue文件：
<template>
    <div class="container">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>E-mail address</th>
                <th>Status</th>
                <th>Sent at</th>
                <th>Expires in</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td class="v-align-middle">
                    john@doe.example
                </td>
                <td class="v-align-middle">
            <span class="label label-default">
                pending
            </span>
                </td>
                <td class="v-align-middle">
                    2017-06-05 17:59:15
                </td>
                <td class="v-align-middle">
                    29 days
                </td>
                <td>
                    <div class="btn-group pull-right">

                        <jaimy-modal id="1"></jaimy-modal>

                    </div>
                </td>
            </tr>
            <tr>
                <td class="v-align-middle">
                    jane@doe.example
                </td>
                <td class="v-align-middle">
                <span class="label label-default">
                    pending
                </span>
                </td>
                <td class="v-align-middle">
                    2017-06-05 13:27:25
                </td>
                <td class="v-align-middle">
                    29 days
                </td>
                <td>
                    <div class="btn-group pull-right">

                        <jaimy-modal id="2"></jaimy-modal>

                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import JaimyModal from './JaimyModal.vue'

    export default {

        components: { JaimyModal },

        props: [],

        mixins: [],

        data: function () {
            return {
                //
            }
        },

        computed: {
            computed_variable() {
                return '';
            }
        },

        created() {
            //
        },

        mounted() {
            //
        },

        methods: {
            //
        },

        watch: {
            //
        }
    }
</script>

这里需要注意的重要一点是按钮中的：data target=“'#inviteDetailsModal'+id”
部分，其中的数字对应于道具的id。使用：
可以将其设置为表达式，并解析为唯一引用
正如您所看到的，设置与以前完全不同。其中，模式是表行的嵌套组件。一旦您开始将组件视为外观和功能的重复部分，但其中包含唯一的数据，事情会很快发生。请将其视为Laravel中的模型
在被告知需要将设计（CSS）、标记（HTML）和功能（JS）分开很长时间之后，将它们全部放在一个文件中是很奇怪的。但是接受它，你就会爱上VueJS:D
让Vuex看一看！当你得到使用和操作同一数据集的多个组件时，这简直是天赐良机
最后一点：当你开始考虑使用fn.trigger之类的东西时，y
<template>
    <div class="container">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>E-mail address</th>
                <th>Status</th>
                <th>Sent at</th>
                <th>Expires in</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td class="v-align-middle">
                    john@doe.example
                </td>
                <td class="v-align-middle">
            <span class="label label-default">
                pending
            </span>
                </td>
                <td class="v-align-middle">
                    2017-06-05 17:59:15
                </td>
                <td class="v-align-middle">
                    29 days
                </td>
                <td>
                    <div class="btn-group pull-right">

                        <jaimy-modal id="1"></jaimy-modal>

                    </div>
                </td>
            </tr>
            <tr>
                <td class="v-align-middle">
                    jane@doe.example
                </td>
                <td class="v-align-middle">
                <span class="label label-default">
                    pending
                </span>
                </td>
                <td class="v-align-middle">
                    2017-06-05 13:27:25
                </td>
                <td class="v-align-middle">
                    29 days
                </td>
                <td>
                    <div class="btn-group pull-right">

                        <jaimy-modal id="2"></jaimy-modal>

                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import JaimyModal from './JaimyModal.vue'

    export default {

        components: { JaimyModal },

        props: [],

        mixins: [],

        data: function () {
            return {
                //
            }
        },

        computed: {
            computed_variable() {
                return '';
            }
        },

        created() {
            //
        },

        mounted() {
            //
        },

        methods: {
            //
        },

        watch: {
            //
        }
    }
</script>

<template>
    <div>
        <a href="#" class="btn btn-default" data-toggle="modal" :data-target="'#inviteDetailsModal' + id" @click="fetchData()">
            <i class="fa fa-eye"></i>
        </a>

        <div class="modal fade slide-up" :id="'inviteDetailsModal' + id" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content-wrapper">


                    <div class="modal-content" id="details">
                        <div class="modal-header clearfix text-left">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                <i class="pg-close fs-14"></i>
                            </button>
                            <h5>
                                Invite details for <span class="semi-bold">{{ email }}</span>
                            </h5>
                            <p class="p-b-10">
                        <span data-tooltip="true" data-placement="bottom" title="token">
                            <em>{{ token }}</em>
                        </span>
                            </p>
                        </div>
                        <div class="modal-body">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Sent at</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="log in logs">
                                    <td>{{ log.number }}</td>
                                    <td>{{ log.sentAt }}</td>
                                    <td>{{ log.status }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer text-center">
                            <span class="hint-text">
                                <em>expires in <strong>{{ expires }}</strong> days</em>
                            </span>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {

        props: ['id'],

        data: function () {
            return {
                email: null,
                token: null,
                logs: [],
                expires: null,
                baseUrl: 'https://yourbaseurl.com',
            }
        },

        mounted: function () {
            //
        },

        methods: {
            update: function (data) {
                this.email = data['email'];
                this.token = data['token'];
                this.logs = data['logs'];
                this.expires = data['expires'];
            },
            fetchData: function () {
                console.log('data fetched');

                // Commented out for local purposes
//                this.$http.get(this.baseUrl + '/system/invites/' + this.email + '/details')
//                        .then(response => {
//                            this.update(response.body);
//                        }, response => {
//                            console.log('whoops something went wrong');
//                        });

                // Dummy data
                this.update({
                    email: 'test@test ' + this.id + '.com',
                    token: 'token123123asdsasdasdasd',
                    logs: [
                        {
                            number: 1,
                            sentAt: '2017-01-01',
                            status: 'Ok',
                        },
                        {
                            number: 2,
                            sentAt: '2017-02-01',
                            status: 'Failed',
                        },
                    ],
                    expires: '2017-10-01'
                });
            }
        },

    }
</script>