Question

目前，我正在研究数据（如图像）概述。

我希望点击后展开内容（例如Google图片概述）。切换不断扩展的作品完美无缺（show =！show），但不幸的是，我找不到任何方法只打开点击的项目..所以所有项目都会一起展开或缩小。

我阅读了所选状态（https://alligator.io/vuejs/dynamic-styles/ - 动态绑定样式）..但无法使用此解决方案。

以下是我的方法：https://jsfiddle.net/chrtz/fw5r8a5k/2/

HTML：

    <div id="app">
    <div class="item" v-for="i in 100">
      <div class="thumb" @click="show = !show">
        Item #{{ i }}
      </div>
      <div v-show="show"  class="detail">
        <button id="close" @click="show = !show">
        X  
        </button>
        <h1>Item {{ i }}'s details'</h1>
      </div>
    </div>

JS：

  new Vue({
    el: '#app',
    data: {
      show: false
    }
  })

也许你们其中一个人可能知道一个解决方案。就像Phunky的例子（下图）一样，当内容扩展时，如何动态地添加行之间的空间？我用Phunky的代码尝试了一些东西，但无法让它工作。

（这是我的灵感：https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

以及旧的存档Vue论坛帖子： https://forum-archive.vuejs.org/topic/2108/architecture-design-question/2

Phunky 基于VueJs1.0做了一个很好的解决方案： https://jsfiddle.net/Phunky/caa62nL0/ （我尝试在那里添加一个关闭按钮，但这并没有增加大量额外的JavaScript！而且我找不到取消选择项目的方法。）

此外，主题所有者（ monk ）是正确的，动态加载内容将是最佳解决方案..有没有人在这里有想法？）

非常感谢。

PS：当然，我还是VueJS的新人

使用VueJS构建扩展网格

0 个答案: