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

Having trouble with jQuery events not triggering properly after dynamically inserting elements using an ajax request?

Exploring the methods for retrieving and setting values with app.set() and app.get()

Running a function with a parameter upon clicking results in an error

Change the name of "rows" in the findAndCountAll method of Sequelize

The Correct Way to Implement Return in jQuery Ajax

JavaScript Grouping Arrays

Vue Js error message: The following dependency could not be found: * core-js/fn/promise

I'm encountering an issue with my React master component not being able to locate the

Tips on incorporating personalized javascript functions into Durandal

Updating Rails record using Ajax with select_tag and onchange functionality

What could be the reason for the "category empty" message appearing at the first index after clicking on the add

How can I ensure my game or website fits perfectly on the screen without any need

What is the best way to deactivate buttons with AngularJS?

Managing Ajax error messages

When attempting to pass Rgraph image data through a jQuery AJAX call, a 403 Forbidden error is being

"Troubleshooting: Why is my Bootstrap modal window only printing a

Issue with Masonry.js implementation causing layout to not display correctly

Creating dynamic templates and embellishments in VUE

Localizing strings that are not saved in a database

"Execute asynchronous tasks in Javascript and receive the returned