У меня есть несколько картинок как получить width у всех и написать определенный width каждому?

Question

[Ibishka]

export default {
  data() {
    return {
      galleries: [],
      videos: [],
      galleriesList: [
        {
          img: "gallery1.jpg"
        },
        {
          img: "gallery2.jpg"
        },
        {
          img: "gallery3.jpg"
        },
        {
          img: "gallery4.jpg"
        }
      ],
      videosList: [
        {
          img: "video1.jpg",
          video: "video1.mp4"
        },
        {
          img: "video2.jpg",
          video: "video2.mp4"
        },
        {
          img: "video3.jpg",
          video: "video3.mp4"
        }
      ]
    };
  },
  methods: {
    getGalleries() {
      this.galleries = this.galleriesList;
    },
    getVideos() {
      this.videos = this.videosList;
    },
    insertVideo(e) {
      // <source src="${require(`@/assets/videos/video${event.target.dataset.video}.ogv`)}" type="video/ogg">
      // e.target.parentNode.classList.remove("fill");
      e.target.parentNode.innerHTML = `<video autoplay controls><source src="${require(`@/assets/videos/${event.target.dataset.video}`)}" type="video/mp4">Your browser does not support the video tag.</video>`;
      this.$parent.onPlay();
    },
    qw() {
      alert(this.$refs.preview.clientWidth);
    }
  },
  created() {
    this.getGalleries();
    this.getVideos();
  },
  mounted() {
    this.qw();
  }
};

Выводит undefined. Хотя элементов видит.

Comments

[Алексей Ярков]

getGalleries() {
      this.galleries = this.galleriesList;
},
getVideos() {
      this.videos = this.videosList;
},

Зачем? О_о

Что касается вопроса. А где ваши попытки установить картинке width?

Ну и темплейт приведите что-ли для полноты картины.

[Ibishka]

Алексей Ярков, Мне нужно сперва узнать width

[Алексей Ярков]

Ibishka, темплэйт в студию

[Ibishka]

Алексей Ярков,

<ul class="videos">
            <li class="video fill" v-for="(video,index) in videos" :key="index">
              <!-- :style="`background:url(${require(`@/assets/img/${video.img}`)}) no-repeat center/cover`" -->
              <img class="preview" ref="preview" :src="require(`@/assets/img/${video.img}`)" alt />
              <button @click="insertVideo($event)" class="play" :data-video="`${video.video}`"></button>
            </li>
          </ul>

[Алексей Ярков]

Ibishka, ну я так и думал )) В консоль выведите this.$refs.preview и все поймете )

[Ibishka]

Алексей Ярков, Делал выводит элементы

[Алексей Ярков]

Ibishka, задаю наводящий вопрос:
Что здесь не так?
alert(this.$refs.preview.clientWidth);

[Ibishka]

Алексей Ярков, Нужно как массив перебрать через forEach?

[Алексей Ярков]

Ibishka, конечно! Любым удобным способом.