vue.js основные показать / скрыть внутри метода

Question

vue.js основные показать / скрыть внутри метода

1

Я совершенно новый для vuejs. Впечатляющая структура, поэтому я изучаю, как переделать все другие вещи, которые я обычно делал с jquery с vue.js. Моя основная проблема, с которой я сталкиваюсь, заключается в том, что в рамках метода я пытаюсь показать или скрыть div, на основании которого не выполняется условие. Он работает неточно. Он показывает, но никогда не скрывает. Административный div должен присутствовать только в том случае, если оба пользователя вошли в систему.

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .panel-footer {

            height: 40px !important;
        }

        body {
            font-size: 18px;
        }

        .blue {
            color: #0079C2;
        }

    </style>
</head>

<body>
    <div id="app">hello world
    </div>
    
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                items: [],
                Title: ""
            },
            created: function() {
                this.getCurrentUser();
            },
            methods: {
                getCurrentUser: function() {
                    var root = 'https://example.com';
                    var headers = {
                        accept: "application/json;odata=verbose"

                    }
                    var vm = this;
                    var __REQUESTDIGEST = '';
                    $.ajax({
                        url: root + "_api/web/currentuser",
                        type: 'Get',
                        headers: headers,
                        success: function(data) {

                            vm.Title = data.d.Title;
                            console.log(vm.Title)
                            if (vm.Title == "Marks, Wendy" || "Adams, Todd") {
                                document.getElementById("admin").style.display = "block";
                            }else
                            
                            {
                             document.getElementById("admin").style.display = "none";

                            }


                        }

                    })

                },

             
            }
        })

    </script>

</body>

Vzupo 30 апр. 2018, в 15:34

Источник

0

Добавьте поле show: true в свои данные. Затем используйте <div v-if = "show"> </ div> ... обновляйте переменную show до true false, когда вы хотите показать или скрыть этот <div>
Truong Dang 30 апр. 2018, в 13:05
0

я бы использовал vm.Title == "Оррин, Стивен"
Vzupo 30 апр. 2018, в 19:08

Теги:

javascript

vue.js

1 ответ

Ещё вопросы

Добавьте поле show: true в свои данные. Затем используйте <div v-if = "show"> </ div> ... обновляйте переменную show до true false, когда вы хотите показать или скрыть этот <div>
я бы использовал vm.Title == "Оррин, Стивен"

George Bailey · Accepted Answer · 2018-04-30T11-12-00.000Z

Vue позволяет выполнять conditional rendering. Вам не нужно делать, как

 document.getElementById("admin").style.display = "block";

Или что-нибудь в этом роде.

просто используйте v-if binding vuejs. Это сделает это за вас. подобно

 <div id="admin" v-if="Title ==X"></div>

Другим вариантом условного отображения элемента является директива v-show. Использование во многом одинаково:

<div id="admin" v-show="Title ==X"></div>

я бы использовал vm.Title == "Оррин, Стивен"