Запуск метода с переменной после/во время загрузки страницы

Question

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

<div class="example" v-for="element in list" :key="element.order">
  <div class="grid" @click="dropdownScene(element)">
    <div v-for="f in frame">
      <img :src="f.src" class="img-thumbnail"/>
    </div>
  </div>
</div>

<script>
export default {
data(){
  return {
      frame: [],
      list: ...
  }
},
methods:{
    dropdownScene(scene) {
        this.frame = [];
        for (let i = 0; i < scene.data['thumbs'].length; i++) {
          if (this.frm[0].data[scene.data['thumbs'][i]]) {
            this.frame.push(this.frm[0].data[scene.data['thumbs'][i]]);
          }
        }
        return this.frame;
    }
 }
 </script>

В какую сторону копать или как решить задачу, насколько я понял хуки как здесь не помогут?

Answer 1

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

<div class="example" v-for="element in list" :key="element.order">
  <div class="grid">
    <div v-for="f in frame">
      <img :src="f.src" class="img-thumbnail"/>
    </div>
  </div>
</div>

<script>
export default {
data(){
  return {
      frame: [],
      list: null,
  }
},
created: function() {
    this.dropdownScene();
},
methods:{
    dropdownScene(scene) {
        this.frame = [];
        for (let i = 0; i < scene.data['thumbs'].length; i++) {
          if (this.frm[0].data[scene.data['thumbs'][i]]) {
            this.frame.push(this.frm[0].data[scene.data['thumbs'][i]]);
          }
        }
        return this.frame;
    }
 }
 </script>

Инициализируйте list. После этого, за счёт того, что vuejs реактивный фреймворк, он увидит, что list был изменён и перерендерит его. Но здесь нужно быть внимательным. Если Вы будете менять лист вне created, тогда это нужно делать с помощью $set:

<div class="example" v-for="element in list" :key="element.order">
  <div class="grid">
    <div v-for="f in frame">
      <img :src="f.src" class="img-thumbnail"/>
    </div>
  </div>
</div>

<script>
export default {
data(){
  return {
      frame: [],
      list: null,
  }
},
created: function() {
    this.list = [];  // Откуда здесь должны взяться значения?
    for (let i = 0; i < this.list.length; i++)  {
        this.dropdownScene(this.list[i])
    }
},
methods:{
    dropdownScene(scene) {
        this.frame = [];
        for (let i = 0; i < scene.data['thumbs'].length; i++) {
          if (this.frm[0].data[scene.data['thumbs'][i]]) {
            this.frame.push(this.frm[0].data[scene.data['thumbs'][i]]);
          }
        }
        return this.frame;
    }
 }
 </script>

БЛОГ НА HUSL

Запуск метода с переменной после/во время загрузки страницы

Ответы (1 шт):