Question

我实际上在VueJs中开发了自己的投资组合。在这里查看项目：https://jsfiddle.net/lucju04/anghk83p/5/

有一件事我没有理解。如果您检查JSFiddle，您会在第一个vue el #home中看到数据被Vue正确绑定：

new Vue({
  el: '#home'
});

如果你点击了＆＃34; En savoir plus＆＃34;按钮，幻灯片将向下滑动，但数据不会被vue绑定。我不明白什么是最好的方法。

我已经尝试将＆＃34; slideDetails＆＃34;第一个vue实例中的数据，我只看到没有vue渲染的数据（我看到例如{{slideDetails.headlineFirstLine}}代替数据）。

正确组织这个的好方法是什么？

非常感谢。

Answer 1

您已创建了两个vue实例。这些实例彼此没有联系并为自己而生活。使用组件或共享数据。（https://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/）

我已经更新了你的代码了。变化：

添加了两个模板容器
添加了#app容器和$mount方法
添加了工作组件
添加了一些新的变量和方法
数据必须是函数（https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function）
添加了computed值
添加了两个道具，用于在工作弹出窗口中显示数据
添加了v-bind（:)和v-on（@）短片

希望这会对你有所帮助。它并不完美，我删除了一些代码（eventListeners）。

不包括CSS，否则这篇文章很长。我只删除了display: none;选择器中的#work属性。

＆＃13;

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

＆＃13;

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

＆＃13;

两个Vue实例？还是一个？数据未在两个解决方案中绑定

1 个答案: