时间戳

首页 > 解决方案 > Vue js：如何隐藏按钮

javascript - Vue js：如何隐藏按钮

问题描述

我是下面这段代码中 Vue js 的新手，我想在没有选择任何内容时隐藏按钮“清除过滤器”，仅在调用函数“selectedAnswer(index)”时显示按钮，以便它仅在应用过滤器时显示，否则它应该被隐藏，有没有办法在我的代码中做到这一点？并提前感谢

<template>
  <div class="container" width=800px>
    <b-row>
      <b-col cols="8">
        <h1> Recently Asked </h1>
        <ul class="container-question" v-for="(question1,index) in questions" :key="index">
          <li>
            {{question1.question}}
          </li>
        </ul>
      </b-col>
      <b-button class="outline-primaryy" style="margin:auto;" @click="ClearFilter" >Clear Filter</b-button>
    </div>
    <router-view />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        questions: [],
        answered: null,
        index: 0,
        selectedIndex: null,
      }
    },
    methods: {
      selectedAnswer(index) {
        this.selectedIndex = index;
        this.questions = this.questions.filter((question) => question.incorrect_answers.includes(index))
        console.log(index)
      },
      ClearFilter() {
        this.questions = this.unmutated
      },
      watch: {
        question1: {
          handler() {
            this.selectedIndex = null;
            this.answered = false;
          },
        },
      },
    },
    mounted: function() {
      fetch('https://opentdb.com/api.php?amount=10&category=9&difficulty=medium&type=multiple', {
          method: 'get'
        })
        .then((response) => {
          return response.json()
        })
        .then((jsonData) => {
          this.questions = jsonData.results
          this.unmutated = jsonData.results;
        })
    }
  }
</script>

标签： javascripthtmlvue.js

解决方案

您只需要将 a 添加v-if="selectedIndex"到您的 btn 元素。IE

<b-button v-if="selectedIndex" class="outline-primaryy" style="margin:auto;" @click="ClearFilter" >Clear Filter</b-button

推荐阅读