Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue.js первый проект / 6 сообщений из 6, страница 1 из 1
19.10.2019, 19:55
    #39878671
Areostar
Areostar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue.js первый проект
осваиваю фреимфорк во по этому примеру
YouTube Video
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:57
    #39878672
Areostar
Areostar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue.js первый проект
Вот весь 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
| Ответить | Цитировать | Написать  
20.10.2019, 19:50
    #39878920
SQLPowerUser
SQLPowerUser
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue.js первый проект
Areostar,

вместо
Код: javascript
1.
v-for="car of cars"


попробуйте
Код: javascript
1.
v-for="car in cars"
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.10.2019, 20:13
    #39879582
Areostar
Areostar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue.js первый проект
SQLPowerUser,

Уже пробывал. не помогло ((
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.10.2019, 21:14
    #39879596
SQLPowerUser
SQLPowerUser
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue.js первый проект
Areostar,

тут id дважды указано
Код: html
1.
<div id="container pt-5" id="app">


Я сейчас сделал так
Код: html
1.
<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
| Ответить | Цитировать | Написать  
22.10.2019, 20:30
    #39880114
Areostar
Areostar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue.js первый проект
Спасибо огромное! Надо же такое проглядеть!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue.js первый проект / 6 сообщений из 6, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 266ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1443627]:
 0ms
get settings:
 8ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 157ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 53ms
get tp. blocked users:
 2ms
others: 14ms
total:  266ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]