nuxtjs 切換由 v-for 循環生成的單個項目

Question

我想創建一個簡單的手風琴式結構，但不知何故我無法切換單個元素：

<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>

我將如何切換單個問題/答案塊？ 我需要使用參考嗎？

目前我可以切換所有元素......

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

我可以起草一個 Q/A 組件，然后在每個組件內部進行切換，但我認為這太過分了。

更新我正在處理以下數據結構：

{
    "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"
                }
                {...}
            ]
        }
    ]
}

Answer 1

這是如何正確地將對象的屬性更改為您正在循環的數組。

<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>

順便說一句，請不要按原樣使用v-html ，而是通過sanitizer傳遞它。

Answer 2

由於我在單個問題/答案對象上沒有id和done字段，並且我需要遍歷幾個 q/a 組，因此在這種情況下創建子組件以針對單個 q 更容易且性能更高/a 用於切換的行：

<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>