Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Vue.js первый проект 
:(
    Опции темы
Areostar
Дата 19.10.2019, 20:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 988
Регистрация: 5.4.2008

Репутация: нет
Всего: -2



осваиваю фреимфорк во по этому примеру
https://www.youtube.com/watch?v=gcFgeyB6SQc...vWL&index=2

скопировал html из примера подключил bootstrap b vue.js ошибок не получаю. вижу фаил  vue в отладчике тоеесть подключился но в консоле нет сообщения как в примере??

начал писать js:

Код

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

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

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


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

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

Добавлено через 4 минуты и 27 секунд
вот полный html если нужно:

Код

<!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>

PM MAIL   Вверх
_zorn_
Дата 22.10.2019, 17:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1006
Регистрация: 21.8.2007

Репутация: нет
Всего: 12



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

В топку говянные самоучители )

В доке все норм описано. Более того в консоле браузера скорей всего сказано "бля ты не задал key" (через  :key="car"), но зачем читать ошибки в консоле, там же хрень всякую пишут. Нас так учили во времена жквери )

Ну а самое главное - ЗАЧЕМ НАМ ОБЪЯВЛЯТЬ КАКИЕ ТО `cars` - фи, сами должны догадаться.


Это сообщение отредактировал(а) _zorn_ - 22.10.2019, 18:10
PM MAIL   Вверх
Areostar
Дата 23.10.2019, 13:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 988
Регистрация: 5.4.2008

Репутация: нет
Всего: -2



нет, проблема была что в диве аpp место  class написал два раза id !!!!

вот браузер не то что надо и подхватывал!

Добавлено через 23 секунды
 smile 
PM MAIL   Вверх
Google
  Дата 17.11.2019, 15:27 (ссылка)  





  Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Применение библиотек | Следующая тема »


 




[ Время генерации скрипта: 0.0865 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.