(Nuxt.js / Vue.js) - скрипт работает только один раз, перестает работать после изменения маршрута / обновления страницы - PullRequest
Новая
       47

(Nuxt.js / Vue.js) - скрипт работает только один раз, перестает работать после изменения маршрута / обновления страницы

1 голос
/ 26 марта 2019

Я "перевожу" сайт своих проектов на Vue.js с Nuxt.js сверху.Я копирую содержимое всех файлов, хранящихся на удаленном сервере, в локальную «статическую» папку.

Все работает нормально, кроме JavaScript, который запускается при первой загрузке страницы, ноесли я переключусь на другую страницу через маршруты или обновлю текущую страницу, JavaScript перестанет работать.

Например, на моем сайте проектов есть эта страница: http://archy -user.name /drag /

Где вы можете в основном перетаскивать изображение в другие блоки с изменениями классов при наведении курсора на любой блок с изображением.

Я скопировал CSS в локальную статическую областьпапка работает нормально, копируется через JavaScript, работает только один раз и перестает работать после изменения маршрута / обновления страницы ...

Работает так же, как веб-сайт при первой загрузке страницы, но после перезагрузки /при изменении маршрута скрипт просто перестает работать, и при наведении курсора на прямоугольники и т. д. не происходит никаких изменений класса, хотя и работает нормально при первом запуске страницы.ded.

Вчера при исследовании этого вопроса в ответах на связанные вопросы говорилось, что это произошло потому, что сценарий запускается только один раз при загрузке страницы, поэтому при изменении маршрута или обновлении страницы сценарийбольше не запускается.

Некоторые предлагали добавить функцию, которая должна выполняться при загрузке страницы, в метод "create ()" внутри "export default" в компоненте vue.

Однако, в моем случае, у меня нет чего-то, что я на самом деле хочу выполнять каждый раз, когда страница загружается, скорее, я хочу выполнить только определенную часть скрипта, которая будет специфическими функциями, запускаемыми только тогда, когда определенные действиявыполняется пользователем на странице посредством взаимодействий ...

Загрузка сценария каждый раз не будет необходимой, поскольку взаимодействия могут даже не происходить, что делает сценарий бесполезным, а также время загрузки.Не говоря уже о том беспорядке, которым стал бы компонент, если бы я добавил весь сценарий к методу «create».

По сути, я не нашел реального решения этой проблемы, только обходные пути, которые вызывают побочные действия.эффекты ...

Вот как структурированы мои компоненты (ниже компонент от http://archy -user.name / drag ): 

<template>
<div class="container">
    <div class="box">
        <div class="fill" draggable="true"></div>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
</template>

<script>
export default {
    name: 'Drag',
    head: {
        link: [ { rel: 'stylesheet', type: 'text/css', href: 'css/drag.css'} ],
        script: [ { src: 'js/drag.js' } ]
    }
}
</script>

<style>

</style>

Любые советы поисправить эту проблему?Или обходные пути для моей ситуации?

PS - Каждый раз, когда я закрываю вкладку и открываю новую, сценарии работают снова, пока страница не обновится / маршрут не изменится

Ответы [ 2 ]

0 голосов
/ 26 марта 2019

это уродливая и совершенно плохая идея, но это именно то, что вы просите.используя nuxt, вы можете обойти проблему навигации, используя старый элемент link вместо router-link или nuxt-link, с помощью которого вы вынуждены обновить всю страницу.

запомните nuxt в универсальном режиме, сервер отобразит первую страницу, остальная часть навигации - это перезагрузка в реальном времени как SPA, ваша проблема решена с помощью addEventListener, потому что при первом посещении вы добавляете это, но никогда не удаляете их.

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

<template>
  <div>
    <a href="/">
      go Home
    </a>
    <div class="container">
      <div class="box">
        <div
          class="fill"
          draggable="true"
          dragstart="dragStart"
          dragend="dragEnd"
        />
      </div>
      <div class="box" />
      <div class="box" />
      <div class="box" />
      <div class="box" />
      <div class="box" />
    </div>
    <script src="js/drag.js" />
  </div>
</template>

<script>
export default {
  name: 'Drag',
  head: {
    link: [{ rel: 'stylesheet', type: 'text/css', href: 'css/drag.css' }]
  }
}
</script>

Я добавлю ссылку на / для тестирования

0 голосов
/ 26 марта 2019

Вы можете переписать свой код в стиле vue. это будет более понятно. и легко использовать 

 <template>
  <div class="drag">
    <div
      v-for="n in range"
      :key="n"
      class="box"
      @dragenter="dragEnter"
      @dragover="dragOver"
      @dragleave="dragLeave"
      @drop="dragDrop"
    >
      <div
        v-if="n === 1"
        class="fill"
        draggable="true"
        @dragstart="dragStart"
        @dragend="dragEnd"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Drag',
  props: {
    range: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      dragged: ''
    }
  },
  methods: {
    dragEnter: function(e) {
      e.target.className += ' hovered'
    },

    dragOver: function(e) {
      e.preventDefault()
    },

    dragLeave: function(e) {
      e.target.className = 'box'
    },

    dragDrop: function(e) {
      e.target.className = 'box'
      e.target.appendChild(this.dragged)
    },

    dragStart: function(e) {
      e.target.className += ' ondrag'
      this.dragged = e.target
      setTimeout(() => (e.target.className = 'invisible'), 0)
    },

    dragEnd: function(e) {
      e.target.className = 'fill'
    }
  }
}
</script>

<style>
.drag {
  background-color: darksalmon;
  display: flex;
  justify-content: flex-start;
}

.box {
  background-color: white;
  width: 160px;
  height: 160px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  margin-right: 15px;
  border: 3px white solid;
}

.fill {
  background-image: url('http://source.unsplash.com/random/150x150');
  width: 150px;
  height: 150px;
  margin: 5px 5px;
  cursor: pointer;
}

.ondrag {
  border: solid #ccc 4px;
}

.invisible {
  display: none;
}

.hovered {
  background: #f4f4f4;
  border-style: dashed;
}
</style>
...