javascript - How to "hideshow" the "Expandable Item" component (quasar) from another compone

admin管理员组

文章数量:1416651

I want to be able to hide/show the ponent in question, but from another ponent

Something like

-dropdown.Vue

  <q-expansion-item
    expand-separator
    icon="perm_identity"
    label="Account settings"
    caption="John Doe"
  >
    <q-card>
      <q-card-section>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
        modi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
        eveniet doloribus ullam aliquid.
      </q-card-section>
    </q-card>
  </q-expansion-item>

closeDrop.Vue

<script>
    methods: {
      click() {
         expansion-item.hide
      }

    }
 </script>

Take in account that there is already @hide and @show methods in the ponent, but I weren't totally able to manage it from vuex!

I want to be able to hide/show the ponent in question, but from another ponent

Something like

-dropdown.Vue

  <q-expansion-item
    expand-separator
    icon="perm_identity"
    label="Account settings"
    caption="John Doe"
  >
    <q-card>
      <q-card-section>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
        modi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
        eveniet doloribus ullam aliquid.
      </q-card-section>
    </q-card>
  </q-expansion-item>

closeDrop.Vue

<script>
    methods: {
      click() {
         expansion-item.hide
      }

    }
 </script>

Take in account that there is already @hide and @show methods in the ponent, but I weren't totally able to manage it from vuex!

• javascript
• vue.js
• axios
• store
• quasar

Share Improve this question Follow edited Nov 21, 2019 at 18:44 NataJdaCOliveira asked Jul 4, 2019 at 15:26 NataJdaCOliveiraNataJdaCOliveira 43111 gold badge66 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Just set the v-model as explained in https://quasar.dev/vue-ponents/expansion-item#Controlling-expansion-state:

<q-expansion-item
  v-model="expanded"
  icon="perm_identity"
  label="Account settings"
  caption="John Doe"
>

And in your script add an expanded variable to your data:

export default {
  data: () => ({
    expanded: false
  })
}

You can now toggle the expanded state by simply modifying the value of expanded:

this.expanded = true

I made it using the ref attribute, and calling it with "this.$refs.expandableItem.hide()

本文标签：