Vue.js первый проект / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue.js первый проект

6 сообщений из 6, страница 1 из 1

Vue.js первый проект

#39878671

Areostar

Участник

Сообщения: 3 545

Рейтинг: 0 / 0

осваиваю фреимфорк во по этому примеру

YouTube Video

Vue({
el:'#app',
data:{
cars: [1, 2, 3, 5]
}
})

в html сделал так:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.

<ul class="list-group">
	<li 
		v-for="car of cars"
		class="list-group-item list-group-item-action pointer"
	>
	12345
	</li>
</ul>

но отображается спик только в один элемент а не в четыре как в примере.

что я делаю не так?

...

Рейтинг:

0 / 0

19.10.2019, 19:55

| Ответить | Цитировать | Написать

Vue.js первый проект

#39878672

Areostar

Участник

Сообщения: 3 545

Рейтинг: 0 / 0

Вот весь html если нужен:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>Vue Example 1</title>

		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
		<link rel="stylesheet" href="css/styles.css">
	</head>
	<body>
		<div id="container pt-5" id="app">
			<div class="row mb-3">
				<div class="col">
					<h1>Cars Application</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<div class="form-group">
						<label for="search">Find Your car</label>
						<input type="text" class="form-control" id="search" placeholder="Name, model" />
					</div>
					
					<hr />
					
					<ul class="list-group">
						<li 
							v-for="car of cars"
							class="list-group-item list-group-item-action pointer"
						>
							12345
						</li>
					</ul>
				</div>
				<div class="col-md-8 pt-3">
					<div class="row">
						<div class="col-md-5">
							<h2>Ford</h2>
							<img src="images/ford-focus.png" alt="" class="rounded detailed-car-image" />
						</div>
						<div class="col-md-7 pt-2">
							<h5>Car details:</h5>
							
							<ul>
								<li>Model - <strong>Focus</strong></li>
								<li>Year - <strong>2015</strong></li>
								<li>Owner - <strong>MAx</strong></li>
							</ul>
							
							<p>+7 921 343 65 44</p>
							
							<button class="btn btn-outline-success mr-3">Show phone</button>
							<button class="btn btn-primary">Buy</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
		<script src="js/manager.js"></script>
	</body>
</html>

...

Рейтинг:

0 / 0

19.10.2019, 19:57

| Ответить | Цитировать | Написать

Vue.js первый проект

#39878920

SQLPowerUser

Участник

Откуда: ссылка в профиле

Сообщения: 277

Рейтинг: 0 / 0

Areostar,

вместо

Код: javascript

v-for="car of cars"

попробуйте

Код: javascript

v-for="car in cars"

...

Рейтинг:

0 / 0

20.10.2019, 19:50

| Ответить | Цитировать | Написать

Vue.js первый проект

#39879582

Areostar

Участник

Сообщения: 3 545

Рейтинг: 0 / 0

SQLPowerUser,

Уже пробывал. не помогло ((

...

Рейтинг:

0 / 0

21.10.2019, 20:13

| Ответить | Цитировать | Написать

Vue.js первый проект

#39879596

SQLPowerUser

Участник

Откуда: ссылка в профиле

Сообщения: 277

Рейтинг: 0 / 0

Areostar,

тут id дважды указано

Код: html

<div id="container pt-5" id="app">

Я сейчас сделал так

Код: html

<div id="app">

Vue подхватил #app и всё заработало. Только вместо бессмысленного 12345 напишите {{ car }}

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.

					
<ul class="list-group">
  <li 
    v-for="car of cars"
    class="list-group-item list-group-item-action pointer"
  >
   {{ car }}
  </li>
</ul>

...

Рейтинг:

0 / 0

21.10.2019, 21:14

| Ответить | Цитировать | Написать

Vue.js первый проект

#39880114

Areostar

Участник

Сообщения: 3 545

Рейтинг: 0 / 0

Спасибо огромное! Надо же такое проглядеть!

...

Рейтинг:

0 / 0

22.10.2019, 20:30

| Ответить | Цитировать | Написать

6 сообщений из 6, страница 1 из 1

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue.js первый проект

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&gotonew=1&tid=1443627]:	0ms
get settings:	10ms
get forum list:	13ms
check forum access:	3ms
check topic access:	3ms
track hit:	62ms
get topic data:	12ms
get first new msg:	7ms
get forum data:	2ms
get page messages:	53ms
get tp. blocked users:	2ms
others:	13ms

total:	180ms