在切换按钮更改时关闭所有可折叠的

时间:2019-02-12 07:13:41

标签: vue.js quasar-framework

当我更改切换按钮上的标签时,尝试打开任何可折叠的折叠门。当我更改切换开关时,它会更改值,并使用V-if来更改Im,以仅显示与所选值相关的内容。

但是当我有一个可折叠的开口时,由于我们更改了切换,它会保留该特定的可折叠开口,但是内容却有所不同。

我尝试将“变量设置为open:false”,将v-model =“ open”分配给所有可折叠对象,并在切换按钮上指定@ input =“ open = false”。

但这根本不起作用,已经在这个看似简单的问题上停留了一段时间,非常感谢帮助。

            <q-btn-toggle
          class="full-width"
          v-model="model"
          toggle-color="primary"
          color="info"
          :options="options"
        />

        <q-list
          dark
          separator
          v-if="this.model === 'getStarted'"
        >
          <q-collapsible
            icon="mdi-plus"
            label="Vad är Fakturo?"
            collapsible
            group="getStarted"
            v-model="open"
          >
            <div>
              testing inside getstarted
            </div>
          </q-collapsible>
          <q-collapsible
            icon="mdi-plus"
            label="Vad kan man göra med Fakturo?"
            collapsible
            group="getStarted"
            v-model="open"
          >
            <div>
              Text i getstarted
            </div>
          </q-collapsible>
          <q-collapsible
            icon="mdi-plus"
            label="Effektiv användning av Fakturo"
            collapsible
            group="getStarted"
            v-model="open"
          >
            <div>
              Text i getstarted
            </div>
          </q-collapsible>
        </q-list>   

   data () {
      return {
        open: false,
        model: 'getStarted',
        options: [
          { label: 'Kom igång', value: 'getStarted' },
          { label: 'Kontakter', value: 'contacts' },
          { label: 'Fakturor', value: 'invoices' },
          { label: 'Produkter', value: 'products' }
        ]
      }
    }

当我更改切换按钮的值时,我希望可折叠的门关闭。

0 个答案:

没有答案