使用 VueJS v-on:click 和 Vanilla JS 在单击时切换折叠不同的 div

Question

是否可以使用 VueJS 和 vanilla JS 来折叠许多 div 之一？

我在具有标题和正文的单独卡片中有数据 - 我希望在单击标题时卡片的正文折叠/展开。

正在使用 VueJS，我想暂时不使用 JQuery，专注于 vanilla JS。

有关它的外观示例，请参阅此小提琴。请记住，我完全知道不要对多个元素使用相同的 ID - 这是一个用于说明目的的快速演示。

<div class="section">
    <div class="title" @click="toggle"><span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span>Toggle This Section</div>
    <hr/>
    <div class="body" id="toggle">
        <img style="height:100px" src="https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg">
     </div>
</div>

我目前的问题是我可以折叠一个 div，但不能折叠单个 div。

Answer 1

请记住 Vue.js 是数据驱动的，因此 DOM 中的更改应该反映底层数据的更改。在您的情况下，您应该将卡片包装在一个组件中，以便它们跟踪自己的个人状态，然后使用标志 withv-show来显示和隐藏该部分：

Vue 实例

Vue.component('card', {
  template: '#card',
  methods: {
    toggle() {
     this.showSection = !this.showSection
    }
  },
  data() {
    return {
      showSection: true, // Flag to show section
      imageUrl: 'https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg',
      toggleIcon: '+'
    }
  }
})

标记

  <div class="section">
    <div class="title" v-on:click="toggle">
      <span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span> Toggle This Section
    </div>
    <hr/>
    <!-- BIND v-show to the showSection data property to reflect changes -->
    <div class="body" v-show="showSection">
      <img v-bind:src="imageUrl">
    </div>
  </div>

请注意，我没有接触 DOM，我只是在切换showSection标志，Vue 正在为我更新 DOM。

这是 JSFiddle：https ://jsfiddle.net/craig_h_411/j1wh75v9/1/

将不同的内容传递给卡片

如果您想将不同的内容传递给每张卡，您可以使用插槽：

<template id="card">
  <div class="section">
    <div class="title" v-on:click="toggle">
      <span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span> Toggle This Section
    </div>
    <hr/>
    <div class="body" v-show="showSection">
      <!-- Add slot details here -->
      <slot></slot>
    </div>
  </div>
</template>

插槽允许您将内容从父组件插入到您的组件中，因为我只使用一个插槽，我放置在组件标签之间的任何内容都会被注入到我将插槽标签放置在组件中的位置，因此：

<card>I'm a card</card>
<card> Im another card</card>

在这些示例中，卡标签之间的消息将添加到插槽中。插槽在父范围内编译，而不是在组件的范围内，因此如果您想使用数据属性，那么它们必须在父级中可用，同样您无法从插槽数据访问组件中的数据属性和方法。

这是 JSFiddle：https ://jsfiddle.net/craig_h_411/ew1epg61/