vuejs 中的所有部分切换问题

Question

我正在尝试添加“多读少读”功能。我面临的问题是，当我单击切换按钮时，它会为所有工作人员显示更多内容。请看看并帮助我找出我哪里出错了。

                 <ul>
                  <li v-for="item in worker.services.slice(0, 2)">
                    {{ item}}
                  </li>                     
                  <div class="body" v-show="showSection">
                    <li v-for="item in worker.services">
                      {{ item}}
                    </li>
                  </div>
                  <button @click="toggle">Toggle</button>  
                </ul>

<script>
methods: {
    toggle() {
      this.showSection = !this.showSection
    }
  },
  data: () => ({
      workers: [],
      showSection: false
    }
  }
})

</script>




<button @click="toggle(worker.id)">{{showSection?'read less':'...'}}</button>

Answer 1

如果使用 worker.id 来确定要扩展哪个工人的部分：

<div class="body" v-show="showSection === worker.id">
  <li v-for="item in worker.services.slice(2)">
    {{ item}}
  </li>
</div>

和

<button @click="toggle(worker.id)">Toggle</button>

和

<script>
methods: {
    toggle(workerId) {
      if (this.showSection === workerId) {
        this.showSection = null
      } else {
        this.showSection = workerId
      }
    }
  },

vuejs 中的所有部分切换问题

All section toggle issue in vuejs

javascript

toggle

vue.js