Switching individual items created by a v-for loop in Nuxt.js

Question

Switching individual items created by a v-for loop in Nuxt.js

I am struggling to create a simple accordion-like structure with the ability to toggle individual elements:

<div v-for="qa, j in group.questions_answers" :key="j">
  <div class="question" @click="toggle()" > <!-- use index here? -->
    <span v-if="itemOpen" class="font-iconmoon icon-accordion-up"><span/>
    <span v-else class="font-iconmoon icon-accordion-down"><span/>
    <span class="q-text" v-html="qa.question"><span/>
  </div>
  <div v-if="itemOpen" class="answer" v-html="qa.answer"></div>
</div>

How can I toggle individual question/answer blocks without affecting all elements? Should I use refs for this functionality?

At present, I am able to toggle all elements at once...

export default {
  data() {
    return {
      itemOpen: true
    }
  },
  methods: {
    toggle() { // index
      this.itemOpen = !this.itemOpen
    }
  }
}

Creating a separate Q/A component with internal toggling logic seems like an excessive solution for this issue.

UPDATE: My data structure is as follows:

{
    "intro_text": "intro text",
    "questions_groups": [
        {
            "group_heading": "heading",
            "questions_answers": [
                {
                    "question": Question",
                    ""answer": "Answer"
                },
                {
                    ""question": "Question",
                    ""answer": "Answer"
                },
                {
                    "question": "Question",
                    "answer": "Answer"
                },
                {
                    ""question": "Question",
                    ""answer": "Answer"
                },
                {...}
            ]
        },
        {
            ""group_heading": "heading 1",
            ""questions_answers": [
                {
                    ""question": "Question",
                    ""answer": "Answer"
                },
                {
                    ""question": "Question",
                    ""answer": "Answer"
                },
                {
                    ""question": "Question",
                    ""answer": "Answer"
                },
                {
                    ""question": "Question",
                    ""answer": "Answer"
                },
                {...}
        },
        {
            ""group_heading": "heading 2",
            ""questions_answers": [
                {
                   "question": "Question",
                    ""answer": "Answer"
                },
                {
                   ""question": "Question",
                    ""answer": "Answer"
                },
                {
                   ""question": "Question",
                    ""answer": "Answer"
                },
                {
                    ""question": "Question",
                    ""answer": "Answer"
                }
                {...}
            ]
        }
    ]
}

javascript vue.js nuxt.js nuxtjs2

Answer 1

Answer №1

If you want to mutate a property of an object into an array for looping, follow this example.

<template>
  <!-- eslint-disable vue/no-v-html -->
  <article>
    <div
      v-for="todo in todoList"
      :key="todo.id"
      class="question"
      @click="toggleMyTodo(todo)"
    >
      <span
        v-if="isTodoDone(todo)"
        class="font-iconmoon icon-accordion-up"
      ></span>
      <span v-else class="font-iconmoon icon-accordion-down"></span>
      <span class="q-text" v-html="todo.question"></span>
      <div v-if="isTodoDone(todo)" class="answer" v-html="todo.answer"></div>
    </div>
  </article>
</template>

<script>
export default {
  data() {
    return {
      todoList: [
        {
          id: 1,
          task: 'Cook',
          done: false,
          question: 'duh?',
          answer: 'ahh okay!',
        },
        {
          id: 2,
          task: 'Hover',
          done: false,
          question: 'duh?',
          answer: 'ahh okay!',
        },
        {
          id: 3,
          task: 'Washing machine',
          done: false,
          question: 'duh?',
          answer: 'ahh okay!',
        },
      ],
    }
  },
  methods: {
    toggleMyTodo({ id }) {
      const currentTodoIndexToToggle = this.todoList.findIndex(
        (todo) => todo.id === id
      )
      // $set is used because of this https://v2.vuejs.org/v2/guide/reactivity.html#For-Arrays
      this.$set(this.todoList, currentTodoIndexToToggle, {
        ...this.todoList[currentTodoIndexToToggle],
        done: !this.todoList[currentTodoIndexToToggle].done,
      })
    },
    isTodoDone({ id }) {
      // I'm using `?.` just to be sure https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
      return this.todoList.find((todo) => todo.id === id)?.done
    },
  },
}
</script>

By the way, it is recommended not to use v-html directly but pass it through a sanitizer.

Just a reminder that we're utilizing this.$set due to Vue's specific requirements, more information can be found here.

Answer 2

If you want to mutate a property of an object into an array for looping, follow this example.

<template>
  <!-- eslint-disable vue/no-v-html -->
  <article>
    <div
      v-for="todo in todoList"
      :key="todo.id"
      class="question"
      @click="toggleMyTodo(todo)"
    >
      <span
        v-if="isTodoDone(todo)"
        class="font-iconmoon icon-accordion-up"
      ></span>
      <span v-else class="font-iconmoon icon-accordion-down"></span>
      <span class="q-text" v-html="todo.question"></span>
      <div v-if="isTodoDone(todo)" class="answer" v-html="todo.answer"></div>
    </div>
  </article>
</template>

<script>
export default {
  data() {
    return {
      todoList: [
        {
          id: 1,
          task: 'Cook',
          done: false,
          question: 'duh?',
          answer: 'ahh okay!',
        },
        {
          id: 2,
          task: 'Hover',
          done: false,
          question: 'duh?',
          answer: 'ahh okay!',
        },
        {
          id: 3,
          task: 'Washing machine',
          done: false,
          question: 'duh?',
          answer: 'ahh okay!',
        },
      ],
    }
  },
  methods: {
    toggleMyTodo({ id }) {
      const currentTodoIndexToToggle = this.todoList.findIndex(
        (todo) => todo.id === id
      )
      // $set is used because of this https://v2.vuejs.org/v2/guide/reactivity.html#For-Arrays
      this.$set(this.todoList, currentTodoIndexToToggle, {
        ...this.todoList[currentTodoIndexToToggle],
        done: !this.todoList[currentTodoIndexToToggle].done,
      })
    },
    isTodoDone({ id }) {
      // I'm using `?.` just to be sure https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
      return this.todoList.find((todo) => todo.id === id)?.done
    },
  },
}
</script>

By the way, it is recommended not to use v-html directly but pass it through a sanitizer.

Just a reminder that we're utilizing this.$set due to Vue's specific requirements, more information can be found here.

Answer 3

Answer №2

Due to the absence of an id and done field on the individual question/answer object, as well as the requirement to loop through multiple q/a groups, it proved more efficient to create a sub component in this scenario for targeting the specific q/a rows for toggle functionality:

<template>
  <div>
    <slot-main-heading>{{$t('faq.h1')}}</slot-main-heading>
    <div v-html="introText"></div>
    <div v-for="(group, i) in questionsGroups" :key="i">
      <slot-htwo-heading>{{group.group_heading}}</slot-htwo-heading>
      <template v-for="(qa, j) in group.questions_answers">
        <cms-accordion-row :qaData="qa" :key="j"/>
      </template>
    </div>
  </div>
</template>

cmsAccordionRow.vue

<template>
<div>
  <div class="question" @click="toggle()">
      <span v-if="itemOpen" class="font-iconmoon icon-accordion-up" ></span>
      <span v-else class="font-iconmoon icon-accordion-down" ></span>
      <span class="q-text" v-html="qaData.question" ></span>
  </div>
  <div v-if="itemOpen" class="answer" v-html="qaData.answer"></div>
</div>
</template>

<script>
export default {
  props: {
    qaData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      itemOpen: true
    }
  },
  methods: {
    toggle() {
      this.itemOpen = !this.itemOpen
    }
  }
}
</script>

Answer 4

Due to the absence of an id and done field on the individual question/answer object, as well as the requirement to loop through multiple q/a groups, it proved more efficient to create a sub component in this scenario for targeting the specific q/a rows for toggle functionality:

<template>
  <div>
    <slot-main-heading>{{$t('faq.h1')}}</slot-main-heading>
    <div v-html="introText"></div>
    <div v-for="(group, i) in questionsGroups" :key="i">
      <slot-htwo-heading>{{group.group_heading}}</slot-htwo-heading>
      <template v-for="(qa, j) in group.questions_answers">
        <cms-accordion-row :qaData="qa" :key="j"/>
      </template>
    </div>
  </div>
</template>

cmsAccordionRow.vue

<template>
<div>
  <div class="question" @click="toggle()">
      <span v-if="itemOpen" class="font-iconmoon icon-accordion-up" ></span>
      <span v-else class="font-iconmoon icon-accordion-down" ></span>
      <span class="q-text" v-html="qaData.question" ></span>
  </div>
  <div v-if="itemOpen" class="answer" v-html="qaData.answer"></div>
</div>
</template>

<script>
export default {
  props: {
    qaData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      itemOpen: true
    }
  },
  methods: {
    toggle() {
      this.itemOpen = !this.itemOpen
    }
  }
}
</script>

Switching individual items created by a v-for loop in Nuxt.js

Answer №1

Answer №2

Similar questions

Utilize a method in Vue.js to filter an array within a computed property

Refresh the page with user input after a button is clicked without reloading the entire page, using Python Flask

Creating a Vue.js application using Visual Studio Code

How can I use a button created with jQuery's .html() method to conceal a <div>?

JavaScript Language Conversion Templating

Make sure to include the onBlur and sx props when passing them through the slotsProp of the MUI DatePicker

Unable to execute JavaScript on Node.js

Oops! Looks like there's an unexpected error with the module 'AppRoutingModule' that was declared in the 'AppModule'. Make sure to add a @Pipe/@Directive/@Component annotation

Ensuring the successful execution of all AJAX calls (not just completion)

Guide on converting this function into a computed property within Vue

I'm trying to access my navigation bar, but for some reason, it's not allowing me to do so

If the href attribute is set to "#" or the target attribute is set to "_blank", then the <a> request cannot be prevented

Angular ng-repeat encounters difficulty in parsing Arabic object

Concealing the nearest object

Step-by-step guide on incorporating an external JavaScript library into an Ionic 3 TypeScript project

"Despite not preferring to use the CORS wildcard, I am encountering a CORS wildcard error

Steps to show an input button and exit the current window

Tips for fixing Unexpected Token Error in a nextJS project

What is the process for incorporating an additional input in HTML as you write?

Is there a way to dismiss a modal window from the parent?