No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Conan
    • Profile
    • Following 0
    • Followers 0
    • Topics 0
    • Posts 3
    • Best 0
    • Groups 0

    Conan

    @Conan

    0
    Reputation
    341
    Profile views
    3
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    Conan Follow

    Latest posts made by Conan

    • RE: Editable cell Data Table examples?

      @april said in Editable cell Data Table examples?:

      <template slot=“col-message” slot-scope=“cell”>
      <q-input :value=“cell.data” :data-id=“cell.row.unique_id” @change.native=“updateMessage”>
      </q-input>
      </template>

      Pretty close! Here’s how I would improve performance:

      <template slot="col-message" slot-scope="cell">
          <q-input :value="cell.data" @change.native="updateMessage($event, cell.row.__index)"></q-input>
          <!-- $event is Vue's magic accessor for native events -->
          <!-- Quasar tracks your row index by assigning a __index property -->
      </template>
      

      Then change your method like this

      // -- methods:
      updateMessage (event, rowIndex) {
        const newMessage = event.target.value
        this.$set(this.table[rowIndex], 'message', newMessage)
      }
      posted in Help
      Conan
      Conan
    • RE: Datatable - Dynamic update problems

      It’s been awhile since I looked at the quasar table code, but you could also try triggering the config watcher on the component even with the same data it might force a new render…

      this.$set(this, “configDataTable”, this.configDataTable)

      posted in Help
      Conan
      Conan
    • RE: Datatable - Dynamic update problems

      In Vue I’ve found reactive data outside of a computed property sometimes difficult to trigger the watchers in nested components.

      I have 3 things to try:

      1: instead of using:
      this.dynamicDataTableColumns = …
      Try using the Vue.set method like:
      this.$set(this, ‘dynamicDataTableColumns’, YOUR_NEW_COLUMNS)

      2: if that doesn’t help try moving the handleTabChange code into a computed property that returns a column array based the activeTabName.

      3: use v-if in your template to draw a new table for each tab. You will end up with more components but due to the nature of v-if you won’t lose performance as it will only draw the related tabs table

      posted in Help
      Conan
      Conan