如何从另一个组件“隐藏/显示”“可扩展项”组件(类星体)

时间:2019-07-04 15:26:25

标签: javascript vue.js axios store quasar

我希望能够从其他组件中隐藏/显示有问题的组件

类似的东西

-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)进行管理

2 个答案:

答案 0 :(得分:3)

只需按照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

答案 1 :(得分:0)

我使用了ref属性,并使用“ this。$ refs.expandableItem.hide()

对其进行了调用