How to fix - no parameter is passed to the component?

Question

Vue.js

I'm studying the lessons of Vue.js , there was a problem - the parameter is not passed to the component. And I compared the code with the author's code - everything is fine. Perhaps something has changed in Vue? The isOpen flag must be passed from the MainLayout

to the Sidebar component . But I am getting an error:

[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... .

I tried to change the type of transfer - it did not help.

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

MainLayout(src/layouts/MainLayout.vue)

The code

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

The code

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

The code

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

Project on Github: https://github.com/likont/vue-finance/tree/master/src

Answer 1

I noticed two errors in the code: https
://github.com/likont/vue-finance/blob/master/...
https://github.com/likont/vue-finance/blob/master/...
And here you need to use one of the options

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