Vue.js — проблема с рендерингом

Я пытаюсь создать компонент, который может показывать/скрывать при нажатии, подобно аккордеону.

У меня есть следующая ошибка, и я не знаю, почему:

[Предупреждение Vue]: свойство или метод «is_open» не определен в экземпляре, но на него ссылаются во время рендеринга. Обязательно объявите реактивные свойства данных в опции данных. (найден в корневом экземпляре)

<div id="app">
    <div is="m-panel" v-show="is_open"></div>
    <div is="m-panel" v-show="is_open"></div>
</div>

</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="comp_a.js" ></script>
<!--<script src="app.js" ></script>-->
</html>

Vue.component('m-panel', {
  data: function() {
      return {
          is_open: true
      }
  },
    template: '<p>Lorem Ipsum</p>'
})

new Vue({
    el:'#app',
})

vue.js vue-component
person user3541631    schedule 13.12.2016    source источник
comment
Это просто пример, или вы действительно написали <script> вне элемента <body>, а сам скрипт вне элемента <html>? У вас есть какие-либо ошибки в консоли, кроме этого сообщения?   -  person raina77ow    schedule 13.12.2016

Ответы (2)


arrow_upward
2
arrow_downward

Ваш код кажется немного запутанным, ваш is_open находится в вашем компоненте, но вы пытаетесь получить к нему доступ в родительском. Вам просто нужно убедиться, что эта логика содержится внутри вашего компонента. Самый простой способ — просто разместить событие на соответствующем элементе в шаблоне компонента:

<template>
  <div>
    <!-- Toggle when button is clicked-->
    <button @click="is_open=!is_open">
      Open Me!
    </button>
    <span v-show="is_open">
      I'm Open!
    </span>
  </div>
</template>

Вот JSFiddle: https://jsfiddle.net/ytw22k3w/

person craig_h    schedule 13.12.2016

arrow_upward
0
arrow_downward

Поскольку вы использовали свойство is_open в «экземпляре #app», но не объявили его в нем, вы объявили его в «компоненте m-panel», который не имеет к нему отношения. Попробуйте что-то подобное, чтобы избежать этого.

new Vue({
    el:'#app',
    data:{
       is_open:''
    }
})
person 胡亚雄    schedule 15.12.2016