我正在尝试创建一个将文件上传到 Firebase Storage 的 Vue Composable。
为此，我使用模块化 Firebase 9 版本。
但我当前的代码没有上传任何内容，而是返回此错误：FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)
由于这个错误已经来自我的，console.log("ERROR", err);我不知道还能在哪里寻找解决方案。
我的代码是使用 TypeScript 实现的，以防万一。
import { projectStorage } from "@/firebase/config";
import { ref, watchEffect } from "vue";
import {
ref as storageRef,
uploadBytesResumable,
UploadTaskSnapshot,
UploadTask,
getDownloadURL,
StorageError,
} from "firebase/storage";
const useStorage: any = (file: File) => {
const error = ref<StorageError | null>(null);
const url = ref<string | null>(null); …我正在尝试创建一个Bootstrap警报框,记住用户单击关闭按钮的时间.我想我需要将这些信息存储在cookie中.理想情况下,cookie只会持续当前会话,然后他们返回该框将再次出现.
我正在使用jQuery-Cookie插件.我把它上传到了/jquery-cookie-master.插件可以在这里找到.
这是我到目前为止通过以下代码找到的.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/jquery-cookie-master/jquery.cookie.js"></script>
<script>
function runOnLoad(){
if($.cookie('alert-box') == null) {
$.cookie('alert-box', 'open', { expires: 7 });
} else if($.cookie('alert-box') == 'close') {
$(".close").hide();
}
</script>
HTML:
<body onload="runOnLoad()">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert" href="hideMe.php" onclick="hideMe()">×</button>
<p>
<strong>FORUM UPGRADE:</strong> In light of our recent surge in popularity we upgraded our forum and unfortunately lost all the old threads in the process.
</p>
<p>
In an effort to kick-start the …这是我上一个问题的后续跟进.
我有一个progressbar.js圈子,可以滚动动画.如果只有一个圆圈,则按预期工作.
现在我想通过循环一个具有不同键值对的对象来创建许多这些动画圆圈.
例如:
var divsValues = {
'total-score-circle': 0.75,
'general-score-circle': 0.80,
'speed-score-circle': 0.85,
'privacy-score-circle': 0.90,
};
对于每个键值对,键是div ID,值是告诉动画要走多远的数字.
下面是我尝试实现循环的代码,但问题是只有最后一个圆圈在滚动时动画.所有圆圈都显示在"动画前"状态,但滚动到底部时,只有最后一个圆实际上变为动画.
我需要每个圆圈在视口中进行动画处理.
//Loop through my divs and create animated circle for each one
function makeCircles() {
var divsValues = {
'total-score-circle': 0.75,
'general-score-circle': 0.80,
'speed-score-circle': 0.85,
'privacy-score-circle': 0.90,
};
for (var i in divsValues) {
if (divsValues.hasOwnProperty(i)) {
bgCircles(i, divsValues[i]);
}
}
}
makeCircles();
// Check if element is scrolled into view
function isScrolledIntoView(elem) { …变量以空引用开始，例如它可能是以下之一：
const myString = ref();
const myString = ref('');
const myString = ref<string>();
const myString = ref<string | null>();
const myString = ref<string | null>(null);
const myString = ref<string | undefined>();
const myString = ref<string | undefined>(undefined);
const myString = ref<string | null | undefined>();
然后它被赋予一个值：
myString.value = "I am a string";
然后再次为ref 分配一个空值，例如它可能是以下之一：
myString.value = '';
myString.value = null;
myString.value = undefined;
这些的哪种组合最适合在 Vue 3 中使用？
或者也许你会做别的事？
当在野外使用时，我正在寻找与 Vue 3 的最大兼容性、TypeScript 类型安全性以及没有 Eslint 错误。
我正在尝试将 Vue 3.2<script setup>标签与 TypeScript 一起使用。
我有一个简单的用例，我想在模板中显示用户 ID。
我的代码在技术上是有效的。它可以很好地显示用户 ID。
但有两点很奇怪...
我已经定义了一个userprop，其类型是User从 Firebase SDK 导入的。User这可行，但我在类型上收到错误： 'User' only refers to a type, but is being used as a value here. ts(2693)。为什么我会收到此错误以及如何修复它？
帮助文档说我不需要import { defineProps } from "vue";。但如果我不进行导入，就会出现错误'defineProps' is not defined。这很令人困惑。当文档另有说明时，为什么我被迫导入它？
这是我的完整代码：
<template>
<div>Logged in as {{ user.uid }}</div>
</template>
<script setup lang="ts">
import { defineProps } from "vue"; //Docs say this is not needed, but it …我正在使用Quasar构建我的 Vue 应用程序，并且我想使用q-input.
我创建了一个名为VInput.vue我的基本组件的 SFC，它看起来像这样：
<template>
<q-input
outlined
class="q-mb-md"
hide-bottom-space
/>
</template>
然后我创建了一个 SFC，名称TestForm.vue如下：
<template>
<q-form>
<v-input label="Email" v-model="email" />
</q-form>
</template>
<script setup lang="ts">
import VInput from './VInput.vue';
import { ref } from 'vue';
const email = ref('john@example.com');
</script>
这些label="Email" v-model="email"部分被传递到我的VInput.vue基础组件并在页面上正确呈现。
q-input但基础组件上存在打字稿错误，VInput.vue因为q-input需要 v 模型：
`Type '{ outlined: true; class: string; hideBottomSpace: true; "hide-bottom-space": boolean; }' is not assignable to type …我使用 Pinia 进行状态管理，并且我希望刷新页面时状态保持不变。
我知道有两个选择：
使用插件。Vuex 有一个vuex-persistedstate插件，Pinia 有一个类似的插件，但仍在开发中。
使用本地存储。幸运的是，Quasar 有一个LocalStorage 插件，在这里使用它会很好。但我不确定如何将它与 Pinia 集成，这就是这篇文章的原因。
我发现一个很好的教程，用 Pinia + Vueuse做了类似的事情。
我尝试使用 Pinia + TypeScript + Quasar LocalStorage 插件来适应我的需求，如下所示：
import { User } from 'firebase/auth';
import { defineStore } from 'pinia';
import { LocalStorage } from 'quasar';
type CreateMutable<T> = { -readonly [P in keyof T]: CreateMutable<T[P]> };
export const useUserStore = defineStore('user', {
state: () => ({
// user: {} as CreateMutable<User>, // This was …我正在尝试在我的 Vue / Quasar / TypeScript 应用程序中使用新的 Google Identity Services JavaScript SDK 授权一些 Google API。
根据文档，我已在文件的标头中加载了 Google 3P 授权 JavaScript 库，index.template.HTML如下所示：
<script src="https://accounts.google.com/gsi/client" onload="console.log('TODO: add onload function')">
</script>
现在在 Vue 组件中我有这个：
<template>
<v-btn
class="q-ma-md"
design="alpha"
label="Connect Google Calendar"
@click="handleGoogleCalendarConnect"
/>
</template>
<script setup lang="ts">
import VBtn from 'src/components/VBtn.vue';
const client = google.accounts.oauth2.initCodeClient({ // <-- TypeScript Error Here
client_id:
'MY_CLIENT_API_KEY_GOES_HERE',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
ux_mode: 'popup',
callback: (response: any) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', code_receiver_uri, true); …我正在使用 TypeScript 编写一个 Vue 可组合项。
它接受一个泛型类型T和一个 paramter path，并返回一个documentref 。
我几乎已经让它工作了，但是每当我尝试为documentref 分配一个值时，它都会抛出如下错误：
Type '{ id: string; }' is not assignable to type 'T'.
'T' could be instantiated with an arbitrary type which could be unrelated to '{ id: string; }'.ts(2322)
这是可组合项的精简版本：
import { ref, Ref } from "vue";
import { projectFirestore } from "@/firebase/config";
import { doc, onSnapshot } from "firebase/firestore";
const getDocument = <T>(
path: string
): {
document: Ref<T | null>;
} …我正在使用 Firebase 函数任务队列来调用众多 API 端点。
每个函数都设置为在遇到错误时重试 5 次。
现在我想跟踪函数是否成功完成或完全失败（即所有重试都已用尽并且函数仍然抛出错误）。
我想跟踪这个，以便如果它完全失败我可以更新 Firestore 文档或发送某种类型的警报。
例如，这里有一个任务队列功能，我如何添加上述功能？
export const someTask = functions.tasks
.taskQueue({
retryConfig: {
maxAttempts: 5,
minBackoffSeconds: 60,
},
rateLimits: {
maxConcurrentDispatches: 1,
},
})
.onDispatch(
async () => {
try {
// Call the API
await apiCall();
return;
} catch (error) {
// Throw error so that the Task Queue will retry
throw new functions.https.HttpsError(
'unknown',
'someTask error'
);
}
}
);
vue.js ×7
typescript ×6
firebase ×3
javascript ×2
vuejs3 ×2
google-oauth ×1
jquery ×1
loops ×1
progress-bar ×1