Vue-Bootstrap не работает с Django. Как я могу начать с него правильно? - PullRequest
Новая
       0

Vue-Bootstrap не работает с Django. Как я могу начать с него правильно?

0 голосов
/ 09 января 2019

Я действительно новичок в VueJS. Я пытаюсь использовать vue-bootstrap вместо обычного bootstrap (включая jquery).

Но это не работает вообще, хотя ошибки нет. Все файлы загружены.

base.html

{% load static %}
<!DOCTYPE html>
<html>
<head>
   <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
</head>
<body>

{% block content %}
{% endblock content %}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</body>

и я скопировал это на примере vue-bootstrap doc https://bootstrap -vue.js.org / документы / компоненты / Navbar /

index.html

{% extends 'base.html' %}

{% block content %}

<b-navbar toggleable="md" type="dark" variant="info">

  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>

  <b-navbar-brand href="#">NavBar</b-navbar-brand>

  <b-collapse is-nav id="nav_collapse">

<b-navbar-nav>
  <b-nav-item href="#">Link</b-nav-item>
  <b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>

<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">

  <b-nav-form>
    <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
    <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
  </b-nav-form>

  <b-nav-item-dropdown text="Lang" right>
    <b-dropdown-item href="#">EN</b-dropdown-item>
    <b-dropdown-item href="#">ES</b-dropdown-item>
    <b-dropdown-item href="#">RU</b-dropdown-item>
    <b-dropdown-item href="#">FA</b-dropdown-item>
  </b-nav-item-dropdown>

  <b-nav-item-dropdown right>
    <!-- Using button-content slot -->
    <template slot="button-content">
      <em>User</em>
    </template>
    <b-dropdown-item href="#">Profile</b-dropdown-item>
    <b-dropdown-item href="#">Signout</b-dropdown-item>
  </b-nav-item-dropdown>
    </b-navbar-nav>

  </b-collapse>
</b-navbar>

{% endblock content %}

Но это показывает как это

Что я не так с этим?

1 Ответ

0 голосов
/ 09 января 2019

Вы не создали экземпляр Vue, и поэтому он не работает. 

<script>
  new Vue({ el: '#app' });
</script>

Каждое приложение Vue запускается созданием нового экземпляра Vue с Функция Vue. Смотрите документы для больше .

Вот рабочая реализация. 

<html>
  <head>
    <link
      type="text/css"
      rel="stylesheet"
      href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"
    />
    <link
      type="text/css"
      rel="stylesheet"
      href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
    />
  </head>
  <body>
   
    <div id="app">
        <b-navbar toggleable="md" type="dark" variant="info">

            <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
          
            <b-navbar-brand href="#">NavBar</b-navbar-brand>
          
            <b-collapse is-nav id="nav_collapse">
          
          <b-navbar-nav>
            <b-nav-item href="#">Link</b-nav-item>
            <b-nav-item href="#" disabled>Disabled</b-nav-item>
          </b-navbar-nav>
          
          <!-- Right aligned nav items -->
          <b-navbar-nav class="ml-auto">
          
            <b-nav-form>
              <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
              <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
            </b-nav-form>
          
            <b-nav-item-dropdown text="Lang" right>
              <b-dropdown-item href="#">EN</b-dropdown-item>
              <b-dropdown-item href="#">ES</b-dropdown-item>
              <b-dropdown-item href="#">RU</b-dropdown-item>
              <b-dropdown-item href="#">FA</b-dropdown-item>
            </b-nav-item-dropdown>
          
            <b-nav-item-dropdown right>
              <!-- Using button-content slot -->
              <template slot="button-content">
                <em>User</em>
              </template>
              <b-dropdown-item href="#">Profile</b-dropdown-item>
              <b-dropdown-item href="#">Signout</b-dropdown-item>
            </b-nav-item-dropdown>
              </b-navbar-nav>
          
            </b-collapse>
          </b-navbar>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

    <script>
      new Vue({ el: '#app' });
    </script>
  </body>
</html>

Примечание: использование URL-адресов, относящихся к протоколу, не сработало на моем локальном компьютере, поэтому я должен поставить https перед импортированными сценариями и таблицами стилей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...