如何在 Vue.js 中隔离组件答案

【问题标题】：How to isolate component in Vue.js如何在 Vue.js 中隔离组件
【发布时间】：2019-02-04 12:34:59
【问题描述】：

我在开始 Vue 教育时遇到了问题。我做了一个小应用程序。如何隔离组件？单击箭头后，我只想打开一部分信息。这是代码和现场演示： https://lemonwm.github.io/app_vue/ https://github.com/lemonWM/app_vue

【问题讨论】：

你能用你的代码在这里或在 jsfiddle 上做一个可重现的 sn-p 吗？这将使调试比阅读源代码更容易。
@Phiter 这是 jsfiddle 链接jsfiddle.net/we4u5k9n/12

标签： vue.js vuejs2 vue-component

【解决方案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-ingredience-left">
        <h3>Składniki</h3>
        <p v-for="ingredient in recipe.ingredients">{{ ingredient }}</p>
      </div>
      <div class="recipe-ingredience-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,
      },
    ] 
  }
}

【讨论】：