Question

我知道这有点模糊，但我在Vue组件中看到了奇怪的行为。

Component有一个名为＆＃34; alertmsg＆＃34;的数据对象。它出现在模板中，并在具有成功或错误属性时显示。如果我在我的代码中的任何地方设置了alertmsg.success或alertmsg.error，它将会显示。

我正在进行API调用，当响应从服务器返回时，我填充了alertmsg.success或alertmsg.error。它工作....但是如果我在进行API调用之前清除alertmsg对象，那么值不会显示（即使我可以看到设置了alertmsg.success / error）。

我在父应用程序中采取了类似的方法，并没有任何问题。知道可能导致这种情况的原因吗？

这是我的组件。我调用了verifyEmail方法，只有在我注释掉_self.alertmsg = {}

时才会显示alertmsg

请指教！

Vue.component('alert-messages', {
    props: ['session'],
    mixins: [dataServiceMX,utilServiceMX],
    data: function () {
        return {
            alertmsg: {success: null, error: null},
        }
    },
methods: {

    verifyEmail: function(vericode) {


        var _self = this;
       _self.alertmsg = {};  //IF I COMMENT THIS OUT THEN IT WORKS                         
      this.$verifyEmail(this.session.userid,vericode).then(function(response) {

           self.alertmsg.success = response.message || 'Your email address was successfully verified.';

        }, function(response)   {
            console.log('Error sending very email',response);
            _self.alertmsg.error = response.message || 'Error verifying email address';

        });
    }
},
template: '<div class="row">\n' +
'                    <div class="col-sm-12">\n' +
'                       <div v-for="warnMsg in warnMessages" class="alert-warning" ><span v-html="warnMsg.text"></span><a v-if="warnMsg.action" @click="alertAction(warnMsg.action)">{{warnMsg.actionText}}</a> <a class="pop_close" ><i class="fa fa-times"></i></a></div>\n' +
'                       <div v-for="errorMsg in errorMessages" class="alert-error"><span v-html="errorMsg.text"></span><a v-if="errorMsg.action" @click="alertAction(errorMsg.action)">{{errorMsg.actionText}}</a> <a class="pop_close" ><i class="fa fa-times"></i></a></div>\n' +
'                       <div v-if="alertmsg.success" class="fadeInDown top__element animated success_message"><i class="fa fa-check-circle-o"></i> <span v-html="alertmsg.success"></span></div>\n' +
'                       <div v-if="alertmsg.error" class="fadeInDown top__element animated error_message"><i class="fa fa-exclamation-triangle"></i><span v-html="alertmsg.error"></span></div>\n' +
'                    </div>\n' +
'                </div>'

}）

Answer 1

只需<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> <table class="dataTable" id="example"><tbody> <tr> <td>0 Tage 00:33:21</td> </tr> <tr> <td>1 Tage 02:39:24</td> </tr> <tr> <td>1 Tage 03:18:25</td> </tr> <tr> <td>1 Tage 03:47:15</td> </tr> <tr> <td>2 Tage 06:47:15</td> </tr> <tr> <td>3 Tage 08:47:15</td> </tr> <tr> <td>4 Tage 18:47:15</td> </tr> <tr> <td>6 Tage 09:47:15</td> </tr> <tr> <td>13 Tage 05:26:59</td> </tr> <tr> <td>13 Tage 18:24:24</td> </tr> <tr> <td>20 Tage 12:12:13</td> </tr> <tr> <td>21 Tage 18:24:56</td> </tr> <tr> <td>34 Tage 22:59:59</td> </tr> <tr> <td>0 Tage 00:11:06</td> </tr> <tr> <td>0 Tage 00:24:22</td> </tr> </tbody></table>代替_self.alertmsg = {success: null, error: null}，否则不会被动。

Vue组件 - 不显示数据的模板

1 个答案: