UGH recent changes to Quasar broke my css, I had to add this:

.rotate-180, .q-expansion-item__toggle-icon--rotated {
    -webkit-transform: rotate3d(0, 0, 1, 90deg) !important /* rtl:ignore */;
    transform: rotate3d(0, 0, 1, 90deg) !important /* rtl:ignore */;
}

Good news, this was fixed by updating to the most recent quasar (from 1.8.2 to 1.8.3), so I guess the bug was there because the rest of my code remained exactly as above.

Any suggestions at all? I’m totally stuck with this.

I am trying to use this plugin (https://www.npmjs.com/package/merge-jsons-webpack-plugin) and integrate with quasar.conf.js. But when I add

let MergeJsonWebpackPlugin = require("merge-jsons-webpack-plugin")

to the top of my quasar config file, I get an error: (node:21762) UnhandledPromiseRejectionWarning: ReferenceError: Cannot access 'dev' before initialization I have also tried moving the line to inside the module.exports block, but also it fails. my extend code and build block itself looks like this:

build: {
      rtl: true,
      scopeHoisting: true,
      vueRouterMode: 'history',
      // vueCompiler: true,
      // gzip: true,
      // analyze: true,
      // extractCSS: false,
      extendWebpack (cfg) {
        cfg.resolve.alias['vue'] = 'vue/dist/vue.common'
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        }),
        cfg.module.rules.push({
          resourceQuery: /blockType=i18n/,
          type: 'javascript/auto',
          use: [
            {loader: '@kazupon/vue-i18n-loader'}
          ]
        }),
        cfg.plugins.push(
          new MergeJsonWebpackPlugin({
            "files": [
              "./jsons/file1.json",
              "./jsons/file3.json",
              "./jsons/file2.json"
            ],
            "output": {
              "fileName": "./dist/result.json"
            }
          })
        )
      }
    },

Any ideas how to get this plugin to work/load?

@wholeeggz depends on what you mean. On Android, this should be automatic, but there is no install prompt on iOS, other than to inform the user via popup that they can hit the share icon and then add to homescreen.

@chyde90 WOW. Thanks!! I don’t think I ever would have figured that out.

I suppose another option would have been to assign a new property inside an object var inside my axios response, and THEN initialize the object to this.prefixes…

@metalsadman Here is a full working example that demonstrates my problem, using the real APIs and some real data: https://codepen.io/ssuess/pen/LYEOWNZ

I have set timeouts to display in the console the data object before and after data is added. You can see that the spinners never go away, despite the object being updated. If you can figure out why that is the case, I would be very happy as I am stumped at the moment. Thanks!

btw, if you use the search filter after the data has loaded, or sort the data by col header, it WILL redraw the table and update the values. But it will not do it on simply updating the data object.

I have tried both with using loading and not using loading (following the addRow script example on this page: https://quasar.dev/vue-components/table and trying with the same type of timeout call), it makes no difference at all. (and as far as I can tell, adding this.loading = true and then this.loading =false only adds an animation to the top of the table) Also like I said, when I use devtools to inspect, my object is indeed properly updated with the correct structure. It is simply that the table component does not reflect the changes to the data. When I get into the office tomorrow I will post my method that makes the axios call and updates the object. Thanks for your help, I appreciate it.

yes sorry here is my table def:

<q-table
      :data="colData"
      :columns="columns"
      row-key="name"
      :filter="filter"
      :loading="loading"
      dense
    ><template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="first" :props="props">
            <span class="link" @click="setSearch(props.row.first)">{{ props.row.first }}</span>
          </q-td>
          <q-td key="second" :props="props">
         <div v-if="props.row.second === ''">
          <q-spinner color="primary" size="1.5em" />
         </div>
         <div v-else>something </div>
          </q-td>
          </q-tr>
          </template><template v-slot:top-right>
        <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
      </q-table>

The spinners show up and never go away, since they never seem to know that the values in the data object have changed, even though in the devtools they have updated.