javascript - props - Problema con la base utilizada en.vue componentes de archivo único

vue router

Question

Me he dado cuenta de que hay un problema cuando se usan las clases de Zurb Foundation en .vue componentes de un solo archivo . Al principio no pude obtener un .vue component Reveal para trabajar dentro del .vue component pero estaba funcionando cuando uso el mismo código en un archivo blade o html . Entonces noté un patrón porque cuando traté de usar la Órbita de la Fundación dentro del componente que falló, al principio pensé que era un error, pero luego usé el mismo código en un archivo blade y funcionó. Otras clases básicas, como la row , la grid y los buttons funcionan bien.

¿Alguien ha experimentado el mismo problema? ¿Y cómo puedo solucionarlo?

Aquí está el código para el modal:

<a data-open="video" class="button warning" href="">WATCH VIDEO</a>

<div id="video" class="reveal" data-reveal>
    <div class="lead">
        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="flex-video">
        <iframe width="1280" height="720" :src="url" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Y para la órbita utilicé el ejemplo básico en los documentos básicos para probar.

    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul class="orbit-container">
    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    <li class="is-active orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
      <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
      <figcaption class="orbit-caption">Lets Rocket!</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
      <figcaption class="orbit-caption">Encapsulating</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
      <figcaption class="orbit-caption">Outta This World</figcaption>
    </li>
  </ul>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</div>

Answer 1

Existe un problema al usar vue components con vue components de foundation js components y es por eso que no se muestran como se explica aquí

Así que agregué esta directiva en mi etiqueta de script:

Vue.directive(''f-orbit'', {
    bind: function (el) {
        new Foundation.Orbit($(el))
    },
    unbind: function (el) {
        $(el).foundation.destroy()
    }
})

Y en mi plantilla agregué vf-orbit lugar de la vf-orbit de data-orbit predeterminada:

<div class="contemporary orbit" role="region" aria-label="Contemporary Pictures" v-f-orbit>

Espero que esto ayude a alguien que está estancado.