标签: quasar-framework

我试图打破这段代码[A](见底部小提琴):

  <div class="q-uploader-files scroll">
      <q-item
        v-for="file in files"
        :key="file.name"
      >
        <q-progress :percentage="file.__progress"/>
        <div>
          {{ file.__progress }}%
        </div>

        <q-item-side v-if="file.__img" :image="file.__img.src">
        </q-item-side>
        <q-item-side right>
          <q-item-tile
            :icon="file.__doneUploading ? 'mdi-done' : 'mdi-clear'"
            :color="file.__doneUploading ? 'primary' : 'color'"
            @click.native="__remove(file)"></q-item-tile>
        </q-item-side>
      </q-item>
    </div>

进入[B]基本相同的代码,然后使用子组件.在这里父母:

<div class="q-uploader-files scroll">
  <my-uploader-progress
    v-for="file in files"
    :file="file"
    :key="file.name"
    :color='color'
  >
  </my-uploader-progress>
</div>

这里的孩子:

<template>
  <q-item>
    <q-progress
      :color="file.__failed ? 'negative' : 'grey'"
      :percentage="file.__progress"
    />
    <div>
      {{ file.__progress }}%
    </div>

    <q-item-side v-if="file.__img" :image="file.__img.src"/>
    <q-item-side v-else icon="mdi-file" :color="color"/>
    <q-item-main :label="file.name" :sublabel="file.__size"/>

    <q-item-side right> …

我需要我的 q-select 根据之前分配的“id”来选择“名称”。目前，输入显示的是数字“id”，而不是它所属的名称。

 <q-select
  class="text-uppercase"
  v-model="model"
  outlined
  dense
  use-input
  input-debounce="0"
  label="Marcas"
  :options="options"
  option-label="name"
  option-value="id"
  emit-value
  map-options
  @filter="filterFn"
  @update:model-value="test()"
>
  <template v-slot:no-option>
    <q-item>
      <q-item-section class="text-grey"> No results </q-item-section>
    </q-item>
  </template>
</q-select>

示例 我希望在 q-select 中显示已加载的 id: 12 的名称。

const model = ref(12);
const options = ref([]);

const filterFn = (val, update) => {
  if (val === "") {
    update(() => {
      options.value = tableData.value;
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    options.value = tableData.value.filter((v) =>
      v.name.toLowerCase().includes(needle)
    );
  }); …

我有一个名为“quasar.styl”的文件：

@import './quasar.variables'
@import '~quasar-styl'

当它被 webpack 使用 styl-loader 处理时，我收到以下错误：

failed to locate @import file ~quasar-styl.styl

我有这种感觉，关于手写笔有些东西我不明白。它会在哪里寻找文件“~quasar-style”？

该文件来自一个正在运行的样板类星体应用程序，并且应用程序目录中的任何位置都没有调用的文件quasar-style，尤其是node_modules，这是我收集波浪号告诉它要查看的地方。

有任何想法吗？

更新：我在这里上传了类星体样板项目： https ://repl.it/@jmbldwn/Quasar-Boilerplate-2

它无法在 repl.it 上运行，因为它需要 quasar-cli，但您可以在那里看到它生成的所有文件。

我想创建一个可以由应用程序本身（无论是“ajax”还是服务器渲染）和其他客户端（例如移动应用程序）调用的 API。我在谷歌搜索“Quasar REST API”时发现的大多数文章都在谈论如何访问外部 API，这不是我的情况。

我的理解是修改src-ssr/extension.js：

module.exports.extendApp = function ({app, ssr}) {
    app.get('/api/bla', (req, res) => {
        res.send('something')
    })
}

并确保port内部src-ssr/index.js：

const
    ssr = require('../ssr'),
    extension = require('./extension'),
    app = express(),
    port = process.env.PORT || 8888

匹配中的值quasar.conf.js：

    devServer: {
        https: false,
        open: false,
        port: 8888,
    },

项目构建并成功运行，但http://localhost:8888/api/bla一直在浏览器中加载。我想念什么？

假设我想覆盖所有平台（Web、Electron 和 Cordova），离线存储数据最安全的方式是什么。

我问的原因是，我的应用程序 Fudget（它是 Cordova / Electron - 但不是 Quasar）使用 WebSQL 在本地存储用户的应用程序数据。这种方法多年来一直运行良好（我偶尔有一个 Android 用户，其数据会被 Android 操作系统擦除 - 但并不经常）。

但在过去的几天里，数百名 Android 用户的 WebSQL（和本地存储）被删除（有人知道为什么吗？），所以我收到了很多来自那些丢失了所有数据的人发来的愤怒电子邮件，设置。

我目前正在开发《Fudget 2》（使用 Quasar），并希望确保这种情况不会再次发生。我想要覆盖所有平台（Web、Mac、Windows、iOS、Android），并且想要将数据存储在本地 JavaScript 对象中，那么对于所有这些平台来说，在本地存储这些数据的最安全方法是什么？

显然，本地存储和 WebSQL（无论如何现在已被弃用）似乎并不安全。但是，例如，我可以安全地使用 IndexedDB 吗？这会永远持续下去吗？

或者我是否需要为每个平台集成一些适当的本机数据存储（例如，使用Cordova 的cordova-plugin-nativestorage 插件，以及 Electron 的类似插件）？如果是这种情况，我该如何处理 Web 平台呢？

我使用vue add quasar.

现在我尝试使用Loading 插件，但无法让它工作。

以下是我与 Quasar/Vue 设置相关的内容：

import { Quasar } from 'quasar'

Vue.use(Quasar, {
  config: {},
  components: { /* not needed if importStrategy is not 'manual' */ },
  directives: { /* not needed if importStrategy is not 'manual' */ },
  plugins: {},
  cssAddon: true,
  extras: [
    'ionicons-v4',
    'material-icons',
    'material-icons-outlined',
    'material-icons-round',
    'material-icons-sharp',
    'mdi-v3',
    'eva-icons',
    'fontawesome-v5',
    'themify'
  ]
})

我尝试了以下选项但无济于事。有任何想法吗？

import { Quasar } from 'quasar'

Vue.use(Quasar, {
  ...,
  framework: {
    plugins: [
      'Loading'
    ]
  }, …

我正在尝试根据一个单元格中的值更改整行的样式。为此，我使用了模板样式，但它只允许我更改一个单元格的样式。

<q-table
  :data="rows"
  row-key="name"
>
  <template v-slot:body-cell-name="props">
    <q-td :props="props">
      <div>
        <q-badge
          :label="props.value"
          :class="(props.value=='Ice cream sandwich') ? 
            'bg-accent spc' : 'bg-white text-black'"
        ></q-badge>
      </div>
    </q-td>
  </template>
</q-table>

但是，是否可以更改整行的样式，使整个单元格和行填充背景颜色，而不是仅填充单元格值周围的小区域？目前它是如何工作的： https: //codepen.io/pokepim/pen/pogNyVy

但期望的结果是根据单元格中的值整行都是紫色的。

编辑：我不知道有多少列以及它们的名称是什么。

如果 q-input 的值为 != '' 那么只有我想应用规则，例如所需的最大 8 个数字。在下面的代码中，它给了我所需的输入错误，即使它是空的。

<q-input
    filled
    name="landline"
    label="Landline Phone Number"
    v-model="user.landline"
    placeholder="Landline Phone Number"
    ref="landlinePhoneNumber"
    type="number"
    :maxlength="8"
    :rules="[val => val!='' && val.length > 7 || 'Landline Required 8 digit']"
/> 

我将哨兵监控添加到我的类星体应用程序中，但哨兵没有收到任何错误，也没有显示在其面板中

我创建/src/boot/sentry.js并编写了这些代码：

import { boot } from "quasar/wrappers";
import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

export default boot(({ app, router }) => {
  Sentry.init({
    app,
    dsn: "<my sentry dns>",
    integrations: [
      new BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(router),
        tracingOrigins: ["localhost", "my-site-url.com", regex],
      }),
    ],

    trackComponents: true,
    tracesSampleRate: 1.0,
  });
});

我的 Quasar 应用程序是 ssr。我应该如何修复它？

如何为类星体中的文本字段实现自动完成（内容建议）功能？基本上在文本字段中输入，然后在 2 个字符后建议来自网络服务的内容。

旧版本中似乎有一个组件，但我在当前文档中找不到参考：
https://v0-17.quasar-framework.org/components/autocomplete.html

还有自动完成处理，q-select但没有q-input：
https://quasar.dev/vue-components/select#native-attributes-with-use-input

使用：

• 版本3.0.0
• 类星体2.6.0