单击按钮时如何将所有其他布尔值切换为 false

Question

<script>export default {  data() {    return {      drawer: false,      show: false,      show2: false,      cards: [{ name: "card 1" }, { name: "card 1" }, { name: "card 1" }],    };  },};</script> <v-list-item @click="drawer = !drawer">            <v-icon>mdi-chevron-right</v-icon>          </v-list-item>          <v-list-item @click="show = !show">            show1          </v-list-item>          <v-list-item @click="show2 = !show2">            show2</v-list-item><div v-if="show == true">          <v-row no-gutters>            <v-col v-for="card in cards" :key="card">              <v-card                dark                tile                height="200"                width="98%"                style="display: inline-flex"                class="ma-2"              >                <v-card-title>                  {{ card.name }}                </v-card-title>              </v-card>            </v-col>          </v-row>        </div>           <div v-if="show2 == true">          <v-row no-gutters>            <v-col>              <v-card                dark                tile                               width="98%"                style="display: inline-flex"                class="ma-2"              >             </v-col>             </v-row>             </div>如果单击 show1，如何将 show2 更改为 false？它可以与多个布尔值一起使用吗？我已经尝试通过数组进行映射，但我似乎无法弄清楚该怎么做。另外，使用这种方法在部分之间转换会更好，还是我应该使用 :router-to 并以这种方式使用转换？

Answer 1

我认为使用此方法在各部分之间进行过渡没有任何问题。这取决于您的喜好。您可以编写一个方法来同时操作两个不同的数据。它应该是这样的：

<script>

export default {

  data() {

    return {

      drawer: false,

      show: false,

      show2: false,

      cards: [{ name: "card 1" }, { name: "card 1" }, { name: "card 1" }],

    };

  },

  methods: {

    clickShowOne() {

            this.show2 = false;

            this.show = !this.show;

        },

        clickShowTwo() {

            this.show2 = !this.show2;

        }

  }

};

</script>

并像这样使用它：

 <v-list-item @click="drawer = !drawer">

            <v-icon>mdi-chevron-right</v-icon>

          </v-list-item>

          <v-list-item @click="clickShowOne">

            show1

          </v-list-item>

          <v-list-item @click="clickShowTwo">

            show2

</v-list-item>