@mr_blaze

Не работают methods и data в Vue.component?

Люди добрые!
Хочу тут сделать чат на его величестве Vue.js, но тут проблема не могу достучатся до свойств вот код:
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>

а вот ошибка:
9c95f692c91848fdb4bb39a8635d1874.png

Пожалуйста помогите!
  • Вопрос задан
  • 532 просмотра
Решения вопроса 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Надо темплейт компонента вынести отдельно в тег script:
<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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы