Как снова загрузить (перезагрузить) компонент в VueJs или уничтожить и загрузить снова?

Question

У меня есть компонент в VueJs, такой как Aplayer (или любые другие компоненты) для воспроизведения аудио и управления списком воспроизведения на нем.

Теперь мне нужно перезагрузить его, когда я изменяю список воспроизведения без изменения маршрутов , Есть ли способ перезагрузить компонент или уничтожить его, а затем загрузить его немедленно?

Я хочу изменить список воспроизведения этого компонента во время воспроизведения музыки c, но иногда он воспроизводит musi c из предыдущего списка воспроизведения, и я не знаю почему.

HTML сегмент:

<aplayer autoplay
  ref="remote"
  :music="music_list[0]"
  :list="music_list"
  :float="float"
  :mutex="mutex"
  repeat="list"
  :mini="mini"
  preload="auto"
  @ended="onEnd"
  @loadstart="playCMD"
  @playing="onStart"
  :listFolded="listFolded"
  :controls="controls"
  :muted.sync="muted"
  :volume.sync="volume"
  slot="display"
/>

JavaScript сегмент:

export default {
  components: {
    Aplayer
  },
  data: () => ({
    float: false,
    autoplay: true,
    mutex: true,
    muted: false,
    volume: 0.8,
    mini: false,
    listFolded: false,
    controls: true,
    music_list: [..]
  }),
  methods: {
    onEnd: function () {
      // Doing a series of jobs that leads to raising an event then
      this.music_list = [new music list after event trigger]
    }
  }
}

Answer 1

Самый простой взлом, просто используйте v-if:

<aplayer v-if='loaded' />

script

export default {
  components: { Aplayer },
  data: () => ({
    loaded: true,
  }),
  methods: {
    onEnd: function () {
      // when you want to reload the component just make `loaded = false`
      this.loaded = false;
      // load agin with `setTimeout` or promise 
      // or with your logic - whenever the component is ready to show
      setTimeout(() => {
        this.loaded = true
      }, 500); // delay in ms
    }
  }
}

Answer 2

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

Значение, когда вы делаете что-то вроде:

this.myArray[1] = "some new value";

Эти изменения не будет выбран Vue.

---

Правильный способ манипулировать массивом в Vue

Используя ваш метод onEnd, попробуйте изменить код на этот. ...

onEnd: function () {
  // Assumption: resultOfSomeJob is an array of songs for the playlist

  // Clear our playlist
  this.music_list = [];

  // Push elements to our music_list using the Vue array method "push"
  this.music_list.push(...resultOfSomeJob);
}

Редактировать:

Я посмотрел код компонента aplayer. Причина, по которой мой ответ работает, состоит в том, что он берет :list, который вы ему даете, и вычисляет новое свойство , musicList.

(Вот код на случай, если он изменится в будущем)

musicList () {
  return this.list
}

Я нашел этот отрывок из Vue документов очень полезно понять, что здесь происходит ...

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

Итак, когда вы изменяете свой массив без использования надлежащих методов для поддержания реактивности, а затем передаются в a-player компонент, вычисляемое свойство не обновляется . Таким образом, ваш старый плейлист остается:)