Dasihub
@Dasihub

Почему данные не рендерятся в Vue?

Я являюсь React-разработчиком и начал изучать Vue.js. Я подключил Vue через script html и вот незадача: я хотел сделать рендер данных, но не получается. Вместо рендера данных просто показывает строку {{contact.name}}.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Rest Api</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container pt-3">
    <h1>REST API</h1>

    <form class="form-inline mb-3" id="app" @submit.prevent="createContact">
        <div style="display: flex; width: 50%; justify-content: space-around; align-items: center">
            <div class="form-group mr-5">
                <label for="name" class="mr-3">Имя</label>
                <input type="text" class="form-control" id="name" v-model="form.name">
            </div>
            <div class="form-group mr-5">
                <label for="value" class="mr-3">Значение</label>
                <input type="text" class="form-control" id="value" v-model="form.value">
            </div>
            <button class="btn btn-primary" type="submit">Создать</button>
        </div>
    </form>

    <div class="card mb-3" v-for="(contact, index) in contacts" :key="index">
        <div class="card-body">
            <h5 class="card-title">{{contact.name}}</h5>
            <p class="card-text">{{contact.value}}</p>
            <button class="btn btn-primary">Отметить</button>
            <button class="btn btn-danger">Удалить</button>
        </div>
    </div>

</div>
<script defer type="module" src="./frontend.js"></script>
</body>
</html>


import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'

new Vue({
    el: '#app',
    data() {
        return {
            form: {
                name: '',
                value: ''
            },
            contacts: []
        }
    },
    methods: {
        createContact() {
            const {...contact} = this.form

            this.contacts.push({...contact, id: Date.now()})

            this.form.name = this.form.value = ''
        }
    }
})
  • Вопрос задан
  • 95 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
Id "app" к которому привязан vue - у формы. Контент ниже - вне этой формы. Т.е. к vue отношения не имеет.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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