Как изолировать компонент в Vue.js

Question

У меня есть проблема в начале моего образования. Я сделал небольшое приложение. Как я могу изолировать компонент? После нажатия на стрелку я хотел бы открыть только один раздел информации. Вот код и живая демонстрация: https://lemonwm.github.io/app_vue/ https://github.com/lemonWM/app_vue

Answer 1

Если вы планируете перебирать свои рецепты, вы можете добавить свойство expanded: false для каждого рецепта и переключить его (вместо глобального свойства данных):

<div class="element-menu" v-for="recipe in recipes">
  <div class="main-element">
    <h2>{{ recipe.title }}</h2>
    <div>
      <button v-on:click='recipe.expanded = !recipe.expanded'><img src="img/arrow_06.png" alt=""></button>
    </div>
  </div>
  <div class="desribe-element">
    <div v-if='recipe.expanded'>
      <div class="recipe-ingriedence-left">
        <h3>Składniki</h3>
        <p v-for="ingredient in recipe.ingredients">{{ ingredient }}</p>
      </div>
      <div class="recipe-ingriedence-right">
        <h3>Przygotowanie</h3>
        <p>{{ recipe.description }}</p>
      </div>
    </div>
  </div>
</div>

data() {
  return {
    recipes: [
      {
        title: "Spaghetti",
        ingredients: [
          "Podwójna porcja makaronu",
          "500g sera białego tłustego",
          "2 łyżeczki soli (lub do smaku)",
          "1/2 łyżeczki zmielonego pieprzu"
        ],
        description: "Lorem...",
        expanded: false //<-- here
      },
      {
        title: "Carbonara",
        ingredients: [
          "...",
        ],
        description: "..",
        expanded: false,
      },
    ] 
  }
}