Vuejs - Expanding Panels

Question

Vuejs - Expanding Panels

Trying to implement an accordion using Vue.js has been a bit challenging for me.

While I came across some examples online, my requirements are slightly different. In order to maintain SEO compatibility, I need to use "is" and "inline-template", which makes the accordion relatively static rather than fully powered by Vue.js.

I have encountered two main issues/questions:

1) The need to dynamically add the class "is-active" to the component based on user interactions (clicks), leading to the following error message.

The property or method "contentVisible" is not defined within the instance but referenced during rendering. It's essential to declare reactive data properties within the data option.

This issue arises because setting it at the instance level requires having a value (true or false) specific to each component for "contentVisible".

To tackle this, I thought of utilizing an array of "contentVisible" at the instance level along with props being passed through instances and custom events on children to update the values at the instance level.

2) While this approach could work, managing a static array poses limitations. How can I create a dynamic array without knowing the number of item components?

<div class="accordion">
    <div>
        <div class="accordion-item" is="item"  inline-template :class="{ 'is-active':  contentVisible}" >
            <div>
                <a @click="toggle" class="accordion-title"> Title A1</a>
                <div v-show="contentVisible" class="accordion-content">albatros</div>
            </div>
        </div>
        <div class="accordion-item" is="item"  inline-template :class="{ 'is-active': contentVisible}" >
            <div>
                <a @click="toggle" class="accordion-title"> Title A2</a>
                <div v-show="contentVisible" class="accordion-content">lorem ipsum</div>
            </div>
        </div>

    </div>

var item = {
  data: function() {
      return {
          contentVisible: true
      }
  },

  methods: {
      toggle: function(){
          this.contentVisible = !this.contentVisible
      }
  }
}

new Vue({
    el:'.accordion',
    components: {
        'item': item
    }
})

Update I implemented the code below, however, the custom event that is supposed to send modifications from the component to the instance isn't functioning properly as tabsactive remains unchanged.

var item = {
  props: ['active'],
  data: function() {
      return {
          contentVisible: false
      }
  },
  methods: {
      toggle: function(index){
          this.contentVisible = !this.contentVisible;
          this.active[index] = this.contentVisible;
          **this.$emit('tabisactive', this.active);**
          console.log(this.active);
      }
  }
}

new Vue({
    el:'.accordion',
    data: {
      tabsactive: [false, false]
    },
    components: {
        'item': item
    }
})

<div class="accordion" **@tabisactive="tabsactive = $event"**>
        <div class="accordion-item" is="item"  inline-template :active="tabsactive" :class="{'is-active': tabsactive[0]}">
            <div>
                <a @click="toggle(0)" class="accordion-title"> Title A1</a>
                <div v-show="contentVisible" class="accordion-content">albatros</div>
            </div>
        </div>
        <div class="accordion-item" is="item"  inline-template :active="tabsactive" :class="{'is-active': tabsactive[1]}">
            <div>
                <a @click="toggle(1)" class="accordion-title" > Title A2</a>
                <div v-show="contentVisible" class="accordion-content">lorem ipsum</div>
            </div>
        </div>
</div>

javascript vue.js vue-component

Answer 1

Answer №1

Here is a solution that I found effective:

<template>
    <div>
        <ul>
            <li v-for="index in list" :key="index._id">

                <button @click="contentVisible === index._id ? contentVisible = false : contentVisible = index._id">{{ index.title }}</button>

                <p v-if='contentVisible === index._id'>{{ index.item }}</p>

            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "sameName",
        data() {
            return {
                contentVisible: false,
                list: [
                    {
                    _id: id1,
                    title: title1,
                    item: item1
                    },
                    {
                    _id: id2,
                    title: title2,
                    item: item2
                    }
                ]
            };
        },
    };
</script>

Answer 2

Here is a solution that I found effective:

<template>
    <div>
        <ul>
            <li v-for="index in list" :key="index._id">

                <button @click="contentVisible === index._id ? contentVisible = false : contentVisible = index._id">{{ index.title }}</button>

                <p v-if='contentVisible === index._id'>{{ index.item }}</p>

            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "sameName",
        data() {
            return {
                contentVisible: false,
                list: [
                    {
                    _id: id1,
                    title: title1,
                    item: item1
                    },
                    {
                    _id: id2,
                    title: title2,
                    item: item2
                    }
                ]
            };
        },
    };
</script>

Answer 3

Answer №2

Regarding point 1:

To resolve the issue, ensure that you have defined contentVisible as a vue instance variable. This is necessary because when using the vue directive v-show, Vue searches for this data in its data objects, computed properties, methods, etc. If it cannot find a reference to it, an error will be thrown.

If your accordion element is linked to the parent component, make sure to add the contentVisible data there. You can achieve this by adding the following code snippet:

new Vue({
    el: '.accordion',
    data: {
        contentVisible: true
    },
    components: {
        'item': item
    }
})

In case of multiple items, you can use another method to display one at a time. For example, you can create a data variable named visibleItemIndex which can be toggled from 1 to n-1 (where n is the number of items).

In such scenarios, you would use

v-show="visibleItemIndex == currentIndex"

in the HTML markup.

You may also consider utilizing a hash to store the indices to be displayed and collapsed.

As for point 2:

If you are working with dynamic arrays, you can leverage v-for. Refer to the official documentation for more details.

Answer 4

Regarding point 1:

To resolve the issue, ensure that you have defined contentVisible as a vue instance variable. This is necessary because when using the vue directive v-show, Vue searches for this data in its data objects, computed properties, methods, etc. If it cannot find a reference to it, an error will be thrown.

If your accordion element is linked to the parent component, make sure to add the contentVisible data there. You can achieve this by adding the following code snippet:

new Vue({
    el: '.accordion',
    data: {
        contentVisible: true
    },
    components: {
        'item': item
    }
})

In case of multiple items, you can use another method to display one at a time. For example, you can create a data variable named visibleItemIndex which can be toggled from 1 to n-1 (where n is the number of items).

In such scenarios, you would use

v-show="visibleItemIndex == currentIndex"

in the HTML markup.

You may also consider utilizing a hash to store the indices to be displayed and collapsed.

As for point 2:

If you are working with dynamic arrays, you can leverage v-for. Refer to the official documentation for more details.

Answer 5

Answer №3

I am struggling to comprehend what it is that you are looking for and the reason behind why you want it, but I believe this solution may meet your needs?

Vue.component('accordion-item', {
  template: '#accordion-item',
  methods: {
    toggle() {
      if(this.contentVisible){
      return
      }
      if(this.$parent.activeTab.length >= 2){
      this.$parent.activeTab.shift()
      }
      this.$parent.activeTab.push(this)
    }
  },
  computed: {
    contentVisible() {
      return this.$parent.activeTab.some(c => c === this)
    }
  }
})

const Accordion = Vue.extend({
  data() {
    return {
      activeTab: []
    }
  },
  methods: {
    handleToggle($event) {
      this.activeTab = []
    }
  }
})

document.querySelectorAll('.accordion').forEach(el => new Accordion().$mount(el))

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<template id="accordion-item">
  <div class="accordion-item" :class="{ 'is-active':  contentVisible}">
      <a href="#" @click="toggle" class="accordion-title"><slot name="title"></slot></a>
      <div v-show="contentVisible" class="accordion-content" @click="$emit('toggle', $event)">
        <slot name="content"></slot>
      </div>
  </div>
</template>

  <div class="accordion">
    <accordion-item @toggle="handleToggle">
      <p slot="title">a title</p>
      <p slot="content">there are words here</p>
    </accordion-item>
    <accordion-item @toggle="handleToggle">
      <p slot="title">titles are for clicking</p>
      <p slot="content">you can also click on the words</p>
    </accordion-item>
    <accordion-item @toggle="handleToggle">
      <p slot="title">and another</p>
      <p slot="content">only two open at a time!</p>
    </accordion-item>
    <accordion-item @toggle="handleToggle">
      <p slot="title">and #4</p>
      <p slot="content">amazing</p>
    </accordion-item>
  </div>

Answer 6

I am struggling to comprehend what it is that you are looking for and the reason behind why you want it, but I believe this solution may meet your needs?

Vue.component('accordion-item', {
  template: '#accordion-item',
  methods: {
    toggle() {
      if(this.contentVisible){
      return
      }
      if(this.$parent.activeTab.length >= 2){
      this.$parent.activeTab.shift()
      }
      this.$parent.activeTab.push(this)
    }
  },
  computed: {
    contentVisible() {
      return this.$parent.activeTab.some(c => c === this)
    }
  }
})

const Accordion = Vue.extend({
  data() {
    return {
      activeTab: []
    }
  },
  methods: {
    handleToggle($event) {
      this.activeTab = []
    }
  }
})

document.querySelectorAll('.accordion').forEach(el => new Accordion().$mount(el))

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<template id="accordion-item">
  <div class="accordion-item" :class="{ 'is-active':  contentVisible}">
      <a href="#" @click="toggle" class="accordion-title"><slot name="title"></slot></a>
      <div v-show="contentVisible" class="accordion-content" @click="$emit('toggle', $event)">
        <slot name="content"></slot>
      </div>
  </div>
</template>

  <div class="accordion">
    <accordion-item @toggle="handleToggle">
      <p slot="title">a title</p>
      <p slot="content">there are words here</p>
    </accordion-item>
    <accordion-item @toggle="handleToggle">
      <p slot="title">titles are for clicking</p>
      <p slot="content">you can also click on the words</p>
    </accordion-item>
    <accordion-item @toggle="handleToggle">
      <p slot="title">and another</p>
      <p slot="content">only two open at a time!</p>
    </accordion-item>
    <accordion-item @toggle="handleToggle">
      <p slot="title">and #4</p>
      <p slot="content">amazing</p>
    </accordion-item>
  </div>

Vuejs - Expanding Panels

Answer №1

Answer №2

Answer №3

Similar questions

The use of the "declare" keyword is prohibited within the `script setup` section of Vue

Tab knockout binding

Steer clear of displaying the latest model directly

Error: The property 'length' cannot be read from an undefined parent causing Uncaught TypeError

What is the correct way to establish a Cookie (header) using XMLHttpRequest in JavaScript?

Maximizing the Use of Multiple Conditions for Styling in AngularJS

What is the best way to prevent images from being loaded with broken links?

Is it possible to execute a program on MacOS through a local HTML website?

Transform basic text into nested JSON structure with JavaScript

An easy way to incorporate a fade-in effect for every word in a text

Struggling to retrieve scope data within directive from controller in AngularJS

A guide on crafting OR queries in Elasticsearch using Node.js

Dealing with multiple jQuery ajax requests - strategies for managing them

Is there a way to effectively transfer both Vertex and Face normals to a Three.js shader?

Can the serialization of AJAX URL parameters in jQuery be customized?

Encountering an error while setting up the object spread operator Babel plugin for ES201

The web application encountered an error: "Uncaught TypeError: Cannot read property 'map' of undefined" when trying to retrieve

Ways to extract text from a temporary element

Conceal the div element if the value exceeds 0

The element vanishes from sight after being detached and re-appended