Question

我在接受Vue教育时遇到了一个问题。我做了一个小应用。如何隔离组件？单击箭头后，我只想打开一部分信息。这是代码和现场演示： 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,
      },
    ] 
  }
}

如何在Vue.js中隔离组件

1 个答案: