Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[vue.js] problem z apką

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

[vue.js] problem z apką

Post 25.04.2018, 16:59:37

Apka działa, ale nie do końca. Jeśli wrzucam ją do komponentu to działa w połowie a nie wiem za co. Jeśli jest poza komponentem to już jest ok i nie wiem czemu

Kod: Zaznacz cały
<div class="container grid-lg">

        <div id="app" v-cloak>

            <h1>Formularz</h1>

            <form-component></form-component>

        </div>

    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<script>

    var Form = {
        template: `
            <div>
                <form action="#" class="form-horizontal" @submit.prevent="submit">
                    <div class="form-group">
                        <div class="col-2">
                            <label class="form-label">Login</label>
                        </div>
                        <div class="col-3">
                            <input class="form-input" type="text" v-model="login">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-2">
                            <label class="form-label">Hasło</label>
                        </div>
                        <div class="col-3">
                            <input class="form-input" type="password" v-model="password">
                        </div>
                    </div>

                    <input type="submit" value="Submit" @click="counterPlus" :disabled="counter >=5"> 
                </form>
                <div class="toast" :class="[{ 'd-none': !sent }, messageClass]" style="margin-top: 50px;">Podaj poprawne dane</div>
            </div>
        `,
        props: ["login", "password", "counter", "sent", "messageClass"],
        methods:{
            submit:function(e) {
                this.pass();
            },
            pass: function() {
                if(this.login == "" || this.password == "") {
                    console.log("złe dane");
                    this.sent = true;
                } else if(this.login == "admin" && this.password == "admin") {
                    console.log("dobre dane, przechodzisz dalej");
                    this.sent = false;
                } else {
                    console.log("złe dane");
                    this.sent = true;
                }
            },
            counterPlus: function() {
                console.log("kliknięcie");
                this.counter++;
            }
        },
    };

    new Vue({
        el:'#app',
        data:{
            login: "",
            password: "",
            sent: false,
            messageClass: "toast-primary",
            counter: 0
        },
        components: {
            "form-component": Form,
        }
    })

</script>
Raju_wk
Posty: 82
Dołączył(a): 10.04.2011

Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Ahrefs [Bot] i 2 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51510 zarejestrowanych użytkowników.
Najnowszy użytkownik: Steeveroutt


Nasi użytkownicy napisali:

  • 937837 wiadomości
  • w 247508 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)