Vue.js - 切换特定问题答案的方法

Question

我正在研究一个简单的切换功能。这是一个常见问题解答，如果您单击该图标，它应该会显示特定问题的答案。

该功能有效，但每个答案都会被切换，因此所有答案都会在点击时显示，我只想显示特定问题。

希望你们能帮帮我。

HTML

    <div class="faq-question">
      <p class="question">Question 1. This is question One</p>
      <font-awesome-icon @click="toggleAnswer()" :icon="['fas', 'angle-right']" class="arrow-icon" />
    </div>
    <div class="faq-answer">
      <p class="answer" v-show="togglerAnswer">{{casino[0].FAQ_Answer_One}}</p>
    </div>
    <div class="faq-question">
      <p class="question">Question 2. This is question Two</p>
      <font-awesome-icon @click="toggleAnswer()" :icon="['fas', 'angle-right']" class="arrow-icon" />
    </div>
    <div class="faq-answer">
      <p class="answer" v-show="togglerAnswer">{{casino[0].FAQ_Answer_Two}}</p>
    </div>

JS：

toggleAnswer() {
            if(!this.togglerAnswer) {
                this.togglerAnswer = true;
            } else {
                this.togglerAnswer = false;
            }
        }

@编辑

export default {
    asyncData({ params }) {
        return axios.get(casinoURL + params.casinos).then(res => {
            return { 
                casino: res.data, 
                casinoID: res.data[0].id, 
                casinoBonus: res.data[0].bonuses,
                casinoPros: res.data[0].brand_pros,
                casinoCons: res.data[0].brand_cons,
                casinoGames: res.data[0].verticals,
                casinoTags: res.data[0].brand_tags,
                casinoAnswers: res.data[0].FAQ_Answer_One,
            };
        })
    },
    data() {
        return {
            casino: [],
            casinoID: null,
            casinoPros: [],
            casinoCons: [],
            casinoGames: [],
            casinoTags: [],
            casinoAnswers: [],
            togglerAnswer: false,
        }
    },
    methods: {
        toggleAnswer() {
            if(!this.togglerAnswer) {
                this.togglerAnswer = true;
            } else {
                this.togglerAnswer = false;
            }
        }
    }
}

Answer 1

添加另一个名为 toggledAnswerIndex 的属性，该属性最初设置为 -1 并像这样使用它：

@click="toggleAnswer(1)" // 1 for answer one 2 for answer two and so on

在方法中：

toggleAnswer(index) {
            if(!this.togglerAnswer) {
                this.togglerAnswer = true;
              this.toggledAnswerIndex =index
            } else {
                this.togglerAnswer = false;
                this.toggledAnswerIndex =-1;
            }
        }

在模板中：

 <div class="faq-answer">
      <p class="answer" v-show="togglerAnswer && toggledAnswerIndex ===1 ">{{casino[0].FAQ_Answer_Two}}</p>
    </div>

编辑

您应该在asyncData 中返回一个数组casinoAnswers，例如：

 async asyncData({ params }) {
    let res= await axios.get(casinoURL + params.casinos)
     return {casinoAnswers :res.data}
 
 }

并从数据选项中删除casinoAnswers。

模板：

 <template v-for="(cas,index) in casinoAnswers ">
 <div class="faq-question" v-for="(cas,index) in casino">
  <p class="question">Question {{index}}. This is question {{index}}</p>
  <font-awesome-icon @click="toggleAnswer(index)" :icon="['fas', 'angle-right']" class="arrow-icon" />
</div>
 <div class="faq-answer">
   <p class="answer" v-show="togglerAnswer && toggledAnswerIndex===index">{{cas.FAQ_Answer_One}}</p>
</div>
</template>