Methods and data not working in Vue.component?

M

mr_blaze2017-09-16 18:53:28

JavaScript

mr_blaze, 2017-09-16 18:53:28

Kind people!
I want to make a chat here on his majesty Vue.js, but here the problem is I can’t get through to the properties, here is the code:

Vue.component("chat", {
    template: "#chatTemplate",
    data: function () {
        return {
            messages: [
                {
                    sender: "Vaysa",
                    date: "21.02.17:17:25:13",
                    text: "Привет!",
                    isRead: true,
                    show: true
                },
                {
                    sender: "Petya",
                    date: "21.02.17:17:25:50",
                    text: "Ну привет!",
                    isRead: false,
                    show: true
                },
                {
                    sender: "Dima",
                    date: "21.02.17:17:27:10",
                    text: "ПРИВЕТ ЛОХИ!!!",
                    isRead: false,
                    show: false
                }
            ],
            online: [
                {
                    name: "Petya",
                    date: "21.02.17:16:13:01"
                },
                {
                    name: "Vaysa",
                    date: "21.02.17:17:24:06"
                }
            ],
            mute: [
                "Dima"
            ]
        }
    },
    methods: {
        sendMessage: function () {
            alert(this.mute[0])
        },
        removeMessage: function () {

        },
        editMessage: function () {

        }
    }
})

new Vue({
    el: '#main',
    data: {
        message: 'Hello Vue!'
    }
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Главная</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/style.min.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <title>Главная</title>
    </head>

    <body>
        <div id="main" class="wrapper">
            <chat></chat>
            <template id="chatTemplate">
                <section class="chat">
                    <div class="chat__messages">
                        <ul>
                            <li v-for="msg in messages"></li>
                        </ul>
                    </div>
                </section>
            </template>
        </div>
        <script src="js/vue.min.js"></script>
        <script src="js/main.min.js"></script>
    </body>

    </html>

</body>

</html>

and here is the error:

Please help!

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

E

Evgeny Kulakov, 2017-09-16
@mr_blaze

You need to place the component template separately in the script tag:

<script type="text/x-template" id="chatTemplate">
                <section class="chat">
                    <div class="chat__messages">
                        <ul>
                            <li v-for="msg in messages"></li>
                        </ul>
                    </div>
                </section>
</script>