[Vuejs]-Two Vue Instance ? Or one ? Data not binded in the both solution

by

0đź‘Ť

You’ve created two vue instances. These instances are not connected to each other and living for their own.
Use components or share you data.
(https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch, https://vuex.vuejs.org/en/intro.html, https://alligator.io/vuejs/global-event-bus/)

I’ve updated your code a little bit.
Changes:

Hope this will help you a little bit. Its not perfect and I’ve removed some code (eventListeners).

CSS is not included, otherwise this post is to long.
I’ve only removed the display: none; attribute from your #work selector.

Vue.component('work', {
  template: '#work-template' /* Déclaration du contenu ciblé */,
  props: {
    toggleWork: {
      type: Function
    },
    slideDetails: {
      type: Object
    }
});

// with vue =======================================
/* eslint-disable no-new */
new Vue({
  template: '#home-template' /* Déclaration du contenu ciblé */,
  data() {
    return {
      /* les datas */
      currentSlideIndex: 0 /* Index de slide active */,
      isPreviousSlide: false /* Booléen qui indique s'il y'a une slide précédent à la current slide */,
      isFirstLoad: true,
      isWorkVisible: false,
      slides: [
        {
          /* data d'une slide */
          headlineFirstLine: 'Marina',
          headlineSecondLine: 'Viotti',
          sublineFirstLine: 'Création de site web',
          sublineSecondLine: 'WordPress',
          bgImg: 'http://lorempicsum.com/futurama/627/300/1',
          rectImg: 'http://lorempicsum.com/futurama/255/200/1',
          isDark: false,
          callToActionText: 'En savoir plus'
        },
        {
          headlineFirstLine: 'Explora App',
          headlineSecondLine: '',
          sublineFirstLine: 'Application iPad',
          sublineSecondLine: 'Ionic - TypeScript - Angular',
          bgImg: 'http://lorempicsum.com/futurama/627/300/2',
          rectImg: 'http://lorempicsum.com/futurama/255/200/2',
          isDark: false,
          callToActionText: 'En savoir plus'
        },
        {
          headlineFirstLine: 'Melvyn',
          headlineSecondLine: 'Richardson',
          sublineFirstLine: 'Création de site web',
          sublineSecondLine: 'WordPress',
          bgImg: 'http://lorempicsum.com/futurama/627/300/3',
          rectImg: 'http://lorempicsum.com/futurama/255/200/3',
          isDark: false,
          callToActionText: 'En savoir plus'
        },
        {
          headlineFirstLine: 'Conquest.Space',
          headlineSecondLine: '',
          sublineFirstLine: 'Création de site',
          sublineSecondLine: 'E-Commerce',
          bgImg: 'http://lorempicsum.com/futurama/627/300/4',
          rectImg: 'http://lorempicsum.com/futurama/255/200/4',
          isDark: false,
          callToActionText: 'En savoir plus'
        }
      ]
    };
  },
  computed: {
    currentSlide() {
      return this.slides[this.currentSlideIndex];
    }
  },
  methods: {
    updateSlide(index) {
      index < this.currentSlideIndex
        ? (this.isPreviousSlide = true)
        : (this.isPreviousSlide = false);
      this.currentSlideIndex = index;
      this.isFirstLoad = false;
    },
    toggleWork() {
      this.isWorkVisible = !this.isWorkVisible;
    }
  }
}).$mount('#app');
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <title>LucasJu.fr</title>

    <!-- css -->
    <link rel="stylesheet" href="style.css">

    <!-- js -->
    <!-- v-cloak pour cacher les Ă©lems vue // Switch des class -->
</head>

<body>
    <div id="home-template" style="display: none">
        <div id="home" class="wrapper" v-cloak :class="{'is-previous': isPreviousSlide, 'first-load': isFirstLoad}">
            <!-- v-for pour recupérer toute les slides // :key pour l'eslint -->
            <div class="slide-wrapper" v-for="(slide, index) in slides" :key="slide.id" :class="{ active: index === currentSlideIndex }"
                :style="{ 'z-index': (slides.length - index), 'background-image': 'url(' + slide.bgImg + ')' }">
                <div class="slide-inner">
                    <div class="slide-bg-text">
                        <p>{{ slide.headlineFirstLine }}</p>
                        <p>{{ slide.headlineSecondLine }}</p>
                    </div>
                    <div class="slide-rect-filter">
                        <div class="slide-rect" :style="{'border-image-source': 'url(' + slide.rectImg + ')'}"></div>
                    </div>
                    <div class="slide-content">
                        <h1 class="slide-content-text" :class="{'dark': slide.isDark}">
                            <p>{{ slide.headlineFirstLine }}</p>
                            <p>{{ slide.headlineSecondLine }}</p>
                        </h1>
                        {{isWorkVisible}}
                        <a class="slide-content-cta" @click="toggleWork" :class="{'dark': slide.isDark}">{{ slide.callToActionText }}</a>
                    </div>
                    <h2 class="slide-side-text">
                        <span>{{ slide.sublineFirstLine }} / </span>
                        <span>{{ slide.sublineSecondLine }}</span>
                    </h2>
                </div>
            </div>
            <div class="controls-container">
                <button class="controls-button" v-for="(slide, index) in slides" :key="slide.id" :class="{ active: index === currentSlideIndex }"
                    @click="updateSlide(index)">{{ slide.headlineFirstLine }} {{ slide.headlineSecondLine }}</button>
            </div>
            <div class="pagination-container">
                <span class="pagination-item" v-for="(slide, index) in slides" :key="slide.id" :class="{ active: index === currentSlideIndex }"
                    @click="updateSlide(index)" @keyup.37="updateSlide(index)">
                </span>
            </div>
            <work v-if="isWorkVisible" :toggle-work="toggleWork" :slide-details="currentSlide"></work>
        </div>
    </div>
    <!-- Slide Details -->

    <div id="work-template" style="display:none">
        <div id="work">
            <a class="work__closed" @click="toggleWork">Fermer</a>
            <div class="work__container">
                <div class="work__title">
                    <h1>
                        {{ slideDetails.headlineFirstLine }}
                        <br> {{ slideDetails.headlineSecondLine }}
                    </h1>
                </div>
                <div class="work__separator"></div>
                <p class="work__description">{{ slideDetails.description }}</p>
                <div class="work__infos">
                    <div class="work__infos--block">
                        <h3>title</h3>
                        <p>{{ slideDetails.keywords }}</p>
                    </div>
                </div>
                <ul class="work__media">
                    <li>coucou</li>
                </ul>
            </div>
        </div>
    </div>


    <div id="app"></div>

</body>
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/vue"></script>

<script src="main.js"></script>

</html>

Leave a comment