@postya

Как изменить контент динамичного компонента во Vue JS?

Имеется компонент, который я использую на разных страницах
В этом компоненте все данные берутся из массивовю Например пути для изображений из одного массива, а названия блоков из другог массива.
Я хотел бы использовать тот же самый компонент на другой странице, но там уже будут использоваться уже другие изображения и названия блоков(titles) Изображения и titles также будут браться из массивов, но они могут быть больше или меньше по размеру

Как это можно сделать?

Компонент, который я хочу использовать:

<div class="features container">
      <div
        class="features-item"
        v-for="(image, imageIndex) in images"
        :key="imageIndex"
      >
        <div class="feature__img">
          <img :src="image" alt="" />
        </div>
        <div class="feature__text">
          <h2>{{ featureHeaders[imageIndex] }}</h2>
          <p>{{ featureText[imageIndex] }}</p>
        </div>
      </div>
    </div>


export default {
data() {
    return {
featureHeaders: [
        "Trail Difficulty (1 out of 5)",
        "GPS Coordinates & Elevation",
        "Google Maps Birds-Eye-View",
        "Directions"              
      ],
featureText: [
"Text for first image",
"Text for second image",
"Text for third image",
"Text for fourth image",
],
images: [
        require("../assets/images/primary_features/trail.png"),
        require("../assets/images/primary_features/gps.png"),
        require("../assets/images/primary_features/earth.png"),        
        require("../assets/images/primary_features/time.png"),
]
     }
   }
}


Страница, на которой использую компонент:

<Primary_Features />

import Primary_Features from "../components/Primary_Features";

export default {
  name: "Pricing",
  components: {    
    Primary_Features
  }
  • Вопрос задан
  • 129 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы