adding an active/open class to a set of collapsibles in a v-for

dgk

Looking for a better, actually functional way, to add a class to individual q-collapsibles in a v-for.
Currently my lame attempt is to try and have an array of booleans based on the index and then bind the class to a function that adds the class to any opened collapsible in the group. This kinda works but turns out to be a bad idea in a number of ways besides just feeling klunky.

A better way would be…

If the collapsible component kept track of it’s open state and added a q-collabsible–open or class which I could then style. IMHO any component that has an active or open state should do this, I mean add BEM modifier --active or --open class. That would make it easy to style every component’s active or open state differently. This would mean an upgrade to the collapsible component (a PR)
If I knew how to query (get a handle to) which collapsible DOM element fired the @open/@closed event then I could add a class (are folks using jquery with vue/quasar???). If this was my own code and a @click event I could do that in jquery just not sure how that might happen in quasar/vue land.
Some other clever way which I don’t know about.

Some advice/help please

    <q-list>
    <div v-for="(device, index) in devices">
      <q-collapsible :class="isOpened(index)" @open="opened(index)" @close="closed(index)" v-on:remove v-on:add :label="device.name" >
      <hardware-details class="" :pDevice="device"></hardware-details>
      <q-btn color="negative" @click="removeDevice(device,index)">Delete Device</q-btn>
      </q-collapsible>
    </div>
    </q-list>

  data () {
    return {
      'devices': [],
      'types': [],
      'isOpen': []
    }
  },
  methods: {
    addDevice (text) {
      db.newDocument.bind(hardware)(text, 'device')
    },
    addDeviceType (text) {
      db.newDocument.bind(hardware)(text, 'type')
    },
    removeDevice (device, index) {
      console.log('removing device', device.name)
      hardware.remove(device._id)
      this.$data.devices.splice(index, 1)
    },
    removeType (type, index) {
      console.log('removing device', type.name)
      hardware.remove(type._id)
      this.$data.types.splice(index, 1)
    },
    opened (index) {
      console.log('item opened', index)
      // have to use splice or the re-render won't be tripped for array elements
      this.isOpen.splice(index, 1, true)
      console.log('isOpen', index, this.isOpen[index])
    },
    closed (index) {
      console.log('item closed', index)
      this.isOpen.splice(index, 1, false)
      console.log('isOpen', index, this.isOpen[index])
    },
    isOpened: function (index) {
      console.log('returning particular open state', index, this.isOpen[index])
      return { 'q-collapsible--open': this.isOpen[index] }
    }
  },

rstoenescu

Pushed commit in edge which adds “q-collapsible-opened” or “q-collapsible-closed”.

dgk

what is the package.json entry for edge as opposed to latest releases?

a47ae

@dgk Should be a link to the Github repo https://github.com/quasarframework/quasar-edge.git

rstoenescu

It’s in official 0.14.2 already. You don’t need edge.

dgk

@rstoenescu. It works great thx…but…

If you want your classes to follow BEM (which I highly recommend) modifiers would be double dash instead of single.
http://getbem.com/naming/

On a Static site generator site I built I used BEM and it makes things SO much easier to style. e.g. https://github.com/dkebler/landingpage-flex-hugo-theme/blob/master/static/css/page.css

It’s really worth it. Can’t tell you how many frameworks I’ve tried which were a morass of horrible class names and implementation making custom styling near impossible. BEM is (IMHO) the best way to keep things orderly and scalable especially since this is an open source framework where you won’t necessarily document all the classes for every component.

Along the BEM path I would suggest you have a modifier class for each component’s events. <component name>--<event name>. In which case I recommend going with the exact event name (you used opened instead of open) Thus I would have named it q-collapsible--open . In this way even though it’s not documented I, as a user, would know that that class exists without having to ask. (unless you want to consistently use present tense for events and past tense for corresponding modifier and document that)

At this point if you haven’t followed BEM then a wholesale change to BEM might be for a major version.

No More Posting New Topics!

adding an active/open class to a set of collapsibles in a v-for