如何在 Vue.js 中隔离组件

Posted 2023-02-23

【中文标题】如何在 Vue.js 中隔离组件

【英文标题】：How to isolate component in 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

【参考方案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" ></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,
      ,
    ]