Как исправить — не передаётся параметр в компонент?

Question

[Mark]

Изучаю уроки Vue.js, появилась проблема - не передаётся параметр в компонент. Причём сравнил код с кодом автора - всё хорошо. Возможно, в Vue что-то изменилось?

Из MainLayout на компонент Sidebar должен передаваться флаг isOpen.
Но получаю ошибку:

[Vue warn]: Property or method "isOpen" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declari....

Пробовал заменить тип передачи - не помогло.

<!--    Новый вариант -->
<Sidebar v-model="isOpen" />
<!--   Пробовал - не помогало   -->
<Sidebar :isOpen="isOpen" />

MainLayout(src/layouts/MainLayout.vue)

Код

<template>
  <div>
    <div class="app-main-layout">

      <Navbar @click="isOpen = !isOpen" />

      <Sidebar v-model="isOpen" />

      <main class="app-content" :class="{full: !isOpen}">
        <div class="app-page">
          <router-view/>
        </div>
      </main>

      <div class="fixed-action-btn">
        <a class="btn-floating btn-large blue" href="#">
          <i class="large material-icons">add</i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/app/Navbar'
import Sidebar from '@/components/app/Sidebar'

export default {
  name: 'main-layout',

  data: () => ({
    isOpen: true
  }),

  components: {
    Navbar, Sidebar
  }
}
</script>

Sidebar(src/components/app/Sidebar.vue)

Код

<template>
  <ul class="sidenav app-sidenav" :class="{open: isOpen}">

    <router-link
        v-for="link in links"
        :key="link.url"
        tag="li"
        active-class="active"
        :to="link.url"
        :exact="link.exact"
    >
      <a href="#" class="waves-effect waves-orange pointer">{{ link.title }}</a>
    </router-link>

  </ul>
</template>

<script>
export default {
  data: () => ({
    props: ['isOpen'],
    links: [
      {title: 'Счёт', url: '/', 'exact' : true},
      {title: 'История', url: '/history'},
      {title: 'Планирование', url: '/planning'},
      {title: 'Новая запись', url: '/record'},
      {title: 'Категория', url: '/categories'}
    ]
  })
}
</script>

Navbar(src/components/app/Navbar.vue)

Код

><template>
  <nav class="navbar orange lighten-1">
    <div class="nav-wrapper">
      <div class="navbar-left">
        <a href="#" @click.prevent="$emit('click')">
          <i class="material-icons black-text">dehaze</i>
        </a>
        <span class="black-text">12.12.12</span>
      </div>

      <ul class="right hide-on-small-and-down">
        <li>
          <a
              class="dropdown-trigger black-text"
              href="#"
              data-target="dropdown"
          >
            USER NAME
            <i class="material-icons right">arrow_drop_down</i>
          </a>

          <ul id='dropdown' class='dropdown-content'>
            <li>
              <a href="#" class="black-text">
                <i class="material-icons">account_circle</i>Профиль
              </a>
            </li>
            <li class="divider" tabindex="-1"></li>
            <li>
              <a href="#" class="black-text">
                <i class="material-icons">assignment_return</i>Выйти
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>

</template>

Проект на Github: https://github.com/likont/vue-finance/tree/master/src

Answer 1

[Oleg]

Я заметил в коде две ошибки:

https://github.com/likont/vue-finance/blob/master/...
Вот эта строка должна идти перед data, т.к. пропсы определяются отдельно, а не внутри data

https://github.com/likont/vue-finance/blob/master/...
А тут надо использовать один из вариантов

<Sidebar v-bind:isOpen="isOpen" />
<Sidebar :isOpen="isOpen" />
<Sidebar :is-open="isOpen" />

Comments

[Mark]

Точно, спасибо! Вечером гляну отработает ли, если да - отмечу решением.
Не понимаю как я его мог туда уместить и в процессе поиска не заметить.
Вы используете какую-то IDE, которая подобные косяки синтаксиса подсвечивает? Или плагин для IDE?

Уже второй раз на час из-за такой глупой ошибки потерял.

[Oleg]

Mark, использую Visual Studio Code, но такие косяки он не подсвечивает. Может и есть какой плагин, я не в курсе.

А вообще действовал так: в консоле в ошибке написано, что переменная isOpen не прокидывается, следовательно через плагин vue devtools проверяем на каком месте эта переменная теряется. Определил, что в MainLayout всё ок, а в Sidebar она не попадает. Начал внимательно смотреть код компонента – вот и нашёл