Я являюсь 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 = ''
}
}
})
Простой
Средний
