如何从另一个组件 "hide/show" "Expandable Item" 组件（类星体）

Question

我希望能够 hide/show 有问题的组件，但是来自另一个组件

类似

-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
        commodi 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>

考虑到组件中已经有@hide 和@show 方法，但我无法完全从vuex 管理它！

Answer 1

我使用 ref 属性创建它，并使用 "this.$refs.expandableItem.hide()

调用它

Answer 2

只需按照 https://quasar.dev/vue-components/expansion-item#Controlling-expansion-state 中的说明设置 v-model：

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

然后在您的脚本中向您的数据添加一个 expanded 变量：

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

您现在可以通过简单地修改 expanded 的值来切换展开状态：

this.expanded = true

如何从另一个组件 "hide/show" "Expandable Item" 组件（类星体）

How to "hide/show" the "Expandable Item" component (quasar) from another component

javascript

store

vue.js

quasar

axios