Vue.js 中仅折叠一个组件，不再纠结

vue.js

2024-03-09 13:11:03

解决 Vue.js 中仅折叠一个组件的难题

引言

在构建 Vue.js 应用程序时，可折叠组件是一种方便的功能，允许用户根据需要显示或隐藏内容。然而，当您希望仅折叠一个组件，而不是所有组件时，您可能会遇到一个问题。

问题

当使用全局 collapsed 数据属性时，点击任何可折叠组件的标题都会导致所有组件同时折叠。这与我们仅想折叠特定组件的意图相矛盾。

解决方法：局部作用域 `collapsed` 数据属性

为了解决这个问题，我们需要将 collapsed 数据属性移动到每个 <collapsible> 组件的局部作用域中。这将使每个组件可以独立控制其折叠状态。

在 <collapsible> 组件的 <script> 部分添加以下代码：

export default {
  data() {
    return {
      collapsed: false, // 每个组件局部 collapsed 数据属性
    };
  },
};

改进后的代码

使用局部 collapsed 数据属性的改进代码如下：

<!-- Vue.js 代码 -->

<div id="foo"></div>

<script type="text/x-template" id="collapsible">
  <script>
    export default {
      data() {
        return {
          collapsed: false, // 每个组件局部 collapsed 数据属性
        };
      },
    };
  </script>

  <div class="wrapper">
    <div class="header" v-on:click="collapsed = !collapsed">
      <p>original: ""</p>
    </div>

    <div class="collapsible" v-show="!collapsed">1111</div>
  </div>
</script>

<script type="text/x-template" id="app">
  <div>
    <button v-on:click="collapseAll">Collapse All</button>
    <button v-on:click="expandAll">Expand All</button>

    <div class="wrapper">
      <collapsible ref="collapsible"></collapsible>

      <div v-for="question in questions" v-bind:key="question">
        <p
          :class="question.is_answered ? 'header_answered' : 'header'"
          v-on:click="collapsed = !collapsed"
        >
          {{ question.question_id}} - {{ question.question_title}}
        </p>
        <div
          class="collapsible"
          v-show="!collapsed"
          v-bind:key="question"
          v-for="answer in question.answers"
        >
          <p>{{answer.answer_title}}</p>
        </div>
      </div>
      <!-- .questions -->
    </div>
    <!-- .wrapper -->
  </div>
  <!-- .main -->
</script>