Estoy tratando de crear un componente, que se pueda mostrar / ocultar al hacer clic, similar a un acordeón.

Tengo el siguiente error y no sé por qué:

[Vue warn]: la propiedad o método "is_open" no está definido en la instancia, pero se hace referencia a él durante el procesamiento. Asegúrese de declarar las propiedades de los datos reactivos en la opción de datos. (encontrado en la instancia raíz)

<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',
})
0
user3541631 13 dic. 2016 a las 16:19

2 respuestas

La mejor respuesta

Su código parece un poco confuso, su is_open está en su componente pero está intentando acceder a él en el padre. Solo necesita asegurarse de que esta lógica esté contenida dentro de su componente. La forma más sencilla es simplemente colocar un evento en el elemento relevante en su plantilla de componente:

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

Aquí está JSFiddle: https://jsfiddle.net/ytw22k3w/

2
craig_h 13 dic. 2016 a las 14:14

Debido a que usó la propiedad is_open en '# instancia de aplicación' pero no declaró en ella, u declaró en 'componente de panel m' que no tiene relación con ella. Intente algo como esto para evitarlo.

new Vue({
    el:'#app',
    data:{
       is_open:''
    }
})
0
胡亚雄 15 dic. 2016 a las 06:44