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

Posted 2023-02-23

【中文标题】Vue.js - 切换特定问题答案的方法

【英文标题】：Vue.js - Toggle a method for a specific question answers

【发布时间】：2020-12-22 01:15:34

【问题描述】：

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

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

希望你们能帮帮我。

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;
            
        
    

【参考方案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>

【讨论】：

使用 v-for 和 key 属性不是更容易吗？

@foka135 你是怎么得到答案的？将它们存储在数组中将使任务更容易

请分享所有代码，我认为你在某处做错了

您要将结果存储在casino 数组中吗？

你可以使用map方法只返回需要的字段return casinoAnswers :res.data.map(item=>returnFAQ_Answer_One:item.FAQ_Answer_One,FAQ_Answer_Two:item.FAQ_Answer_Two,