Why is the data not being rendered in Vue?

D

Dosya2022-01-23 00:49:20

Vue.js

Dosya, 2022-01-23 00:49:20

I am a React developer and started learning Vue.js. I connected Vue via script html and here's the problem: I wanted to render the data, but it doesn't work. Instead of rendering data, it simply shows the string {{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/[email protected]/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[email protected]/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 = ''
        }
    }
})

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Aetae, 2022-01-23
@Dasihub

The id "app" to which the vue is attached is in the form. The content below is outside of this form. Those. has nothing to do with vue.