v-для l oop in vue и для получения изображения рядом друг с другом

Question

Итак, у меня есть этот массив на моей js стороне vue, и изображения выравниваются друг под другом, я хочу, чтобы он выровнялся рядом друг с другом, я использую flexbox в s css для отображения это, но строка не работает, что я делаю не так?

JS

 shop_items:
                [
                    { image_path:"thumb.php?src=./assets/dog.jpg&size=640x480"},
                    { image_path:"thumb.php?src=./assets/cat.jpg&size=640x480"}
                ]

HTML

 <div class="animal_list" v-for="item in shop_items>
        <img class="image" :src="item.image_path">
    </div>

S CSS

.animal_list{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
}

Answer 1

Ваш v-for не в том месте. Вы создаете новый элемент div для каждого элемента массива.

Вы должны создать один div и множество изображений внутри него. См. Код ниже:

<template>
  <div>
    <div class="animal_list">
      <template v-for="item in shop_items">
        <img class="image" :src="item.image_path" />
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    shop_items: [
      {
        image_path:
          'https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg',
      },
      {
        image_path:
          'https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg',
      },
    ],
  }),
};
</script>