标签: vue-composition-api
vue3 reactive unexpected behaviour
i've a reactive object, on the save function i call toRaw in order to remove de object reactivity, but, when i change the reactive object props, also the group object is changing.... How???
const newGroup = reactive<Group>({ id: undefined, name: '', enabled: false })
const handleSave = () => {
const group = toRaw(newGroup)
persist(group).then(() => {
newGroup.id = undefined
newGroup.name = 'demo'
console.log(isReactive(group)) //say false but the group.name value is demo
})
}
destructuring the reactive obj as const …
推荐指数
解决办法
查看次数
(Vue) 我在重用可组合函数的引用时遇到问题
我希望我可以包含完整的代码。不然很难理解我的问题。
\n我为我的 Vue 应用程序创建了一个可组合函数，其目的是从数据库中获取文档集合。\n可组合函数如下所示：
\nimport { ref, watchEffect } from 'vue'\nimport { projectFirestore } from '../firebase/config'\n\nconst getCollection = (collection, query) => {\n const documents = ref(null)\n const error = ref(null)\n\n let collectionRef = projectFirestore.collection(collection)\n .orderBy('createdAt')\n\n if (query) {\n collectionRef = collectionRef.where(...query)\n }\n\nconst unsub = collectionRef.onSnapshot(snap => {\n let results = []\n snap.docs.forEach(doc => {\n doc.data().createdAt && results.push({ ...doc.data(), id: doc.id })\n })\n documents.value = results\n error.value = null\n }, (err) => {\n console.log(err.message)\n document.value = null\n error.value = …推荐指数
解决办法
查看次数
如何在设置 Vuetify 3 中使用全局变量
我使用 vue 3 设置，我想访问我使用的全局变量 vuetify。\n我可以在 config.globalVariable 中看到它，但我无法在设置中使用它。
\n{_uid: 0, _component: {\xe2\x80\xa6}, _props: null, _container: div#app, _context: {\xe2\x80\xa6}, \xe2\x80\xa6}\ncomponent: \xc6\x92 component(name, component)\nconfig: Object\ncompilerOptions: (...)\nerrorHandler: undefined\nglobalProperties:\n$vuetify: {defaults: {\xe2\x80\xa6}}\n$messageSystem: {addMessage: \xc6\x92}\n__proto__: Object\nisNativeTag: (tag) => {\xe2\x80\xa6}\n...\n如您所见，我看到了 $vuetify，但在设置中我无法访问它。
\n setup() {\n ...\n this.$vuetify.theme.dark = true; \n ...\n\n这是我访问全局变量的方式吗？
\n我得到的错误：\nCannot read property \'$vuetify\' of undefined
推荐指数
解决办法
查看次数
VueJS 3警告在'@/components/...vue'中找不到导出组件
我正在使用 VueJS 3 应用程序，其中使用vue-router、vue和core-js应用程序，我想在其中使用组件。我的视图目录Home.vue文件如下所示：
<template>
<div class="wrapper">
<section v-for="(item, index) in items" :key="index" class="box">
<div class="infobox">
<PictureBox image="item.picture" />
<PropertyBox itemProperty="item.properties" />
</div>
</section>
</div>
</template>
<script>
import { ref } from 'vue'
import { data } from '@/data.js'
import { PictureBox } from '@/components/PictureBox.vue'
import { PropertyBox } from '@/components/PropertyBox.vue'
export default {
components: {
PictureBox,
PropertyBox,
},
methods: {
addRow() {
console.log('This add new row into table')
}, …推荐指数
解决办法
查看次数
Vue 3 组合 API、未定义变量、生命周期
我对 Vue.js 很陌生，在开发我的第一个项目时，我偶然发现了一个我认为与组件生命周期相关的问题。
上下文如下：我正在使用带有组合 API 的 Vue 3。
我有一个“地图”组件，其中使用 d3.js 来显示图表。在我的 Setup() 方法中，我有 onBeforeMount() 和 onMounted()。在 onBeforeMount() 方法中，我想使用 Firestore 数据库中的数据作为图表中的值。第 47 行的 console.log 正确显示了数据。在 onMounted() 中，我计划放置 d3 图表。但是当我尝试访问 console.log 第 55 行中的数据时，我得到了未定义的信息...
理想情况下，我想从“地图”组件中从数据库中获取数据并使用它来创建图表，然后让组件渲染图表。然后我会有另一个名为“MapSettings”的组件，它将能够更改“Map”中的数据，例如过滤器等...并在图表中自动更新值。最后，两个组件将是兄弟组件并且具有相同的父组件因此“Map”和“MapSettings”处于同一层次结构级别。
但首先我需要理解为什么我变得不确定..任何帮助或建议将不胜感激！
推荐指数
解决办法
查看次数
如何在独立（单文件）Vue3 SPA 中使用 Compose API？
我通过引导项目内容然后构建它以进行部署来编写（业余）Vue3 应用程序(*)。效果很好。
\n我需要创建一个可以直接在浏览器中加载的独立的单个 HTML 页面。几年前，当我开始使用 Vue 时（当时是在 v1 \xe2\x86\x92 v2 过渡期间），我曾经这样做过，当时我立即找到了正确的文档。
\n我找不到类似的 Vue3 和 Composition API。
\n显示值响应变量的框架页面是什么（我将在完整的构建应用程序的上下文中{{hello}}定义）<script setup>
这就是我过去的做法（我希望我做对了）
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>Title</title>\n <script src="https://unpkg.com/vue@2"></script>\n</head>\n<body>\n\n<div id="app">\n {{hello}}\n</div>\n\n<script>\n // this is how I used to do it in Vue2 if I remember correctly\n new Vue({\n el: \'#app\',\n data: {\n hello: "bonjour!"\n }\n // methods, watch, computed, mounted, ...\n })\n</script>\n\n</body>\n</html>\n\n
(*) 我实际上使用Quasar 框架，但这并没有改变我问题的核心。
\n推荐指数
解决办法
查看次数
Vue 3：如何将布尔数据从父级（使用 <script setup>）获取到子级？
首先，我知道这可能是一个超级简单的问题，但我已经挣扎了一个半小时，我已经完成了。有史以来第一个 vue 项目，所以我从来没有让 2 个组件相互通信，更不用说何时<script setup>涉及了。
任何帮助我理解为什么会这样工作的相关文档都会很棒。我想了解这是如何工作的，但我的谷歌搜索一无所获。
这个应用程序很简单，它只是在某些卡上切换浅色模式和深色模式。它的内容比下面的内容更多，但为了便于阅读，我已经删除了不相关的（工作）代码。
我的App.vue代码：
<script setup>
import {ref, defineProps} from "vue";
import card from './components/card.vue'
const darkMode = ref(false);
const props = defineProps({
darkMode: Boolean
})
</script>
<template>
// Bunch of stuff that is irrelevant to the scope of this problem, it works just fine.
</template>
我的card.vue代码：
<script xmlns="http://www.w3.org/1999/html">
export default {
data() {
return {
}
},
}
</script>
<template>
<h1 :class="{ 'text-white': darkMode }"> Content! </h1>
</template>
这个项目更加复杂，但我现在要做的就是让他们谈谈。darkMode我只想根据是否true …
javascript vue.js vuejs3 vue-composition-api vue-script-setup
推荐指数
解决办法
查看次数
为什么这个 vuelidate 函数不能在设置内工作，而只能在方法之外工作？
我正在将 vuelidate 与组合 API 一起使用，但我不明白为什么v$.validate()当我放入 inside methods、 aftersetup而不是 inside 时，它可以正常工作setup。
所以这有效：
setup() {
// inspired from
// https://vuelidate-next.netlify.app/#alternative-syntax-composition-api
const state = reactive ({
// the values of the form that need to pass validation, like:
name: ''
})
const rules = computed (() => {
return {
// the validation rules
}
const v$ = useVuelidate(rules, state)
return {
state,
v$
}
},
methods: {
async submitForm () {
const result = await …推荐指数
解决办法
查看次数
在 Vue3 中将单个属性传递给可组合项
我正在使用可组合项在 Vue3 中加载图像。我已经能够将所有道具作为一个对象成功传递，请参阅这个问题，但我无法传递我想要反应的一个属性。我相当确定问题在于未定义的属性
\n// loadImage.js\nimport { onMounted, ref, watch } from \'vue\'\n\n// by convention, composable function names start with "use"\nexport function useLoadImage(src) {\n let loading = ref(true)\n let show = ref(false)\n\n const delayShowImage = () => {\n setTimeout(() => {\n show.value = true\n }, 100)\n }\n const loadImage = (src) => {\n let img = new Image()\n img.onload = (e) => {\n loading.value = false\n img.onload = undefined\n img.src = undefined\n img = undefined\n delayShowImage()\n }\n img.src …推荐指数
解决办法
查看次数
将具有预定义键的对象数组作为 props 传递给 Vue 3 组件
使用 Composition API 将数组定义为 Vue 3 组件的 props 很简单......
<script setup>
defineProps({
items: {
type: Array,
required: true,
},
});
</script>
现在这个数组应该是一个如下所示的对象数组。这也不是问题。
[
{
username: "foo",
email: "foo@example.com"
},
{
username: "bar",
email: "bar@example.com"
}
]
但是有没有办法定义数组中的每个对象都必须包含属性username和email？这样使用该组件的 props 的人就知道这些对象必须是什么样子？
推荐指数
解决办法
查看次数