单击按钮时如何将所有其他布尔值切换为 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 {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; drawer: false,&nbsp; &nbsp; &nbsp; show: false,&nbsp; &nbsp; &nbsp; show2: false,&nbsp; &nbsp; &nbsp; cards: [{ name: "card 1" }, { name: "card 1" }, { name: "card 1" }],&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; clickShowOne() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.show2 = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.show = !this.show;&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; clickShowTwo() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.show2 = !this.show2;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; }};</script>并像这样使用它：&nbsp;<v-list-item @click="drawer = !drawer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-icon>mdi-chevron-right</v-icon>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </v-list-item>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-list-item @click="clickShowOne">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </v-list-item>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-list-item @click="clickShowTwo">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show2</v-list-item>