标签: vuejs3

我正在尝试模拟<select>在 Vitest 测试中的元素中选择一个选项。<select>模拟选择应设置绑定到s的 ref 的值v-model。正如您在下面看到的，我根据此处和互联网上其他地方的其他问题尝试了许多不同的方法，但我就是无法使其在我的情况下发挥作用。

我正在使用以下内容：

• 版本 3.2.37
• 维特4.0.4
• 维斯特0.26.3
• vue-测试-utils 2.2.7

我创建了一个非常基本的 Vue 组件，其中包括标题和元素<select>：

<script setup lang="ts">
import { ref } from "vue";

const items = ["item 1", "item 2", "item 3", "item 4", "item 5"];
const selectedItem = ref<string>("");

// this is a placeholder for a more complex function
async function handleSubmit(): Promise<void> {
  console.log("in handleSubmit()");
  console.log(quotedString(selectedItem.value));
}

// this is just here for a prettier output
function quotedString(s: string): …

我正在使用 Typescript、Pinia 和 Vue3，并且有一个MenuButton组件，我希望能够传递用于菜单打开状态以及显示/隐藏操作的 Pinia 存储。应用程序中有几个不同的菜单，因此我希望能够将它们传入，并且它们都使用相同的工厂来定义商店。我正在尝试找出如何让所有这些都与打字稿一起使用。

// nav.store.ts\n\nimport { defineStore } from "pinia";\nimport { useStorage } from "@vueuse/core";\nimport type { RemovableRef } from "@vueuse/core";\n\nexport interface MenuStore {\n    isOpen: RemovableRef<boolean>,\n    toggle(force?: boolean) : void,\n    open(): void,\n    close(): void,\n}\n\ninterface State {\n    isOpen: RemovableRef<boolean>;\n}\n\nfunction menuStoreFactory(id: string) {\n    return defineStore(id, {\n        state: () : State => ({\n            isOpen: useStorage(`${id}-open`, false),\n        }),\n\n        actions: {\n            toggle(force?: boolean) {\n                this.isOpen = force != undefined ? force : !this.isOpen;\n            },\n\n            open() {\n                this.isOpen = true;\n …

在玩 Vue 3 反应性时，我遇到了一种我无法解释的行为。

我创建了一个ref原语。检查isRef一下，显然返回了true。但是当作为 a 传递给子组件时prop，isRef()也会isReactive()返回false。为什么 ？

另外，即使它们都返回false，如果值发生变化，我在子组件中添加的这个道具的观察者也会被触发。如果监视的值不是refor ，它如何触发reactive？

这是父级和子级的代码片段：

家长.vue

let foo = ref(0);
function changeFoo() {
  foo.value++;
}
  
console.log("parent check is reactive?", isReactive(foo)); // retruns false
console.log("parent check is ref?", isRef(foo)); // retruns true

watch(foo, (value, oldValue) => {
  console.log("foo changing from", oldValue, "to ", value);
});

儿童.vue

const props = defineProps<{
  foo: number;
}>();

console.log("child check …

src/assets/images/logo.png我在使用Vuetify 组件显示位于文件夹中的静态图像时遇到问题v-img。

      <v-img src="@/assets/images/rima_logo.png"></v-img>

它不会使用 Vuetify 加载，但使用普通img标签确实可以找到资源。另外 vscode 提供了图像相对路径的补全，所以我不知道为什么 vuetify 没有正确加载它。

我收到此错误并注意到已加载

Uncaught (in promise) TypeError: t is undefined
    Ye vue-leaflet.es.js:46
    setup vue-leaflet.es.js:1205
    callWithErrorHandling runtime-core.esm-bundler.js:155
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
    __weh runtime-core.esm-bundler.js:2684
    flushPostFlushCbs runtime-core.esm-bundler.js:341
    flushJobs runtime-core.esm-bundler.js:395
    promise callback*queueFlush runtime-core.esm-bundler.js:280
    queuePostFlushCb runtime-core.esm-bundler.js:302
    queueEffectWithSuspense runtime-core.esm-bundler.js:1576
    scheduler runtime-core.esm-bundler.js:1798
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:384
    triggerRefValue reactivity.esm-bundler.js:1000
    node_modules chunk-LQ5UJQYN.js:1429
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:379
    triggerRefValue reactivity.esm-bundler.js:1000
    node_modules chunk-LQ5UJQYN.js:1429
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:379
    triggerRefValue reactivity.esm-bundler.js:1000
    set value reactivity.esm-bundler.js:1045
    finalizeNavigation vue-router.mjs:3324
    pushWithRedirect vue-router.mjs:3197
    promise callback*pushWithRedirect vue-router.mjs:3164
    push vue-router.mjs:3089
    install vue-router.mjs:3520
    use runtime-core.esm-bundler.js:4349
    <anonymous> main.ts:10
.
.
.
.

我的代码是这样的

                    <div class="map">
                        <l-map ref="map" …

我正在使用 Nuxt 3 和 Vue 3。我有一个默认布局的目录结构，我想将其应用于包括该error.vue页面在内的所有页面。

注意：该error.vue文件位于项目的根目录中。

我的目录结构如下：

project-application
  - /assets/
      - /styles/
          - errorStyles.scss
  - /components/
  - /composables/
  - /layouts/
      - default.vue
  - /pages/
      - index.vue
      - /course/
          - [id].vue
  - /public/
  - /server/
  - /utils/
  - /app.vue
  - /error.vue
  - /nuxt.config.ts
  - package.json
  - ...

目前，这些内容default.vue已应用于我的pages文件夹中的所有内容。

问题：如何将我的default.vue布局应用到我的布局 error.vue（位于项目根文件夹中）。

app.vue文件

project-application
  - /assets/
      - /styles/
          - errorStyles.scss
  - /components/
  - /composables/
  - /layouts/
      - default.vue
  - /pages/ …

当我启动程序时，控制台打印“hasInjectionContext”不是由“node_modules/vue-demi/lib/index.mjs”导出，而是由“node_modules/pinia/dist/pinia.mjs”导入。在../node_modules/pinia/dist/pinia.mjs:6:9。

我尝试删除node_module并将pinia版本更改为2.0.36。但它不起作用。我该如何改变？顺便说一句，我粘了另一个pinia版本为2.0.36的node_module也不起作用。

在将现有应用程序从 Vue2 移植到 Vue3 时，我遇到了一个令人惊讶的问题。

如何让 Vue3 监视“外部”数组的变化？

这在 Vue2 中工作得很好，但在 Vue3 中停止工作：

<ul id="list">
    <li v-for="t in dataArray"> {{t}} </li>
</ul>

<script>
    var numbers = [1,2,3]; //this is my external array

    var app = Vue.createApp({
        data() { return { dataArray : numbers } } //bind Vue to my external array
    }).mount("#list");

    numbers.push(4); //UI not updating, but worked fine in Vue2

</script>

我知道我可以调用app.dataArray.push，或者调用$forceUpdate等，但是有没有办法强制 Vue 简单地监视现有数组？

我想更广泛的问题是：如何将 Vue3 绑定到任意纯 JS 对象？该对象可能太复杂而无法重写，或者可能来自我无法控制的外部 API。这在 Vue2 或 Angular 中很简单（与任何普通对象的双向绑定，无论它是否是实例/组件的一部分）

PS …

我是 Vue3 和 Nuxt3 的新手，我正在从头开始一个新项目，尝试使用 Typescript 正确设置它。

这就是我的package.json样子

{
    "name": "nuxt-prototype",
    "private": true,
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
    },
    "devDependencies": {
        "@privatePackage/commitlint-config": "^1.0.1",
        "@privatePackage/prettier-config": "^2.0.0",
        "@cspell/dict-de-de": "^3.1.0",
        "@nuxt/devtools": "latest",
        "@nuxtjs/color-mode": "^3.3.0",
        "@nuxtjs/eslint-config-typescript": "^12.0.0",
        "@nuxtjs/eslint-module": "^4.1.0",
        "@nuxtjs/stylelint-module": "^5.1.0",
        "@types/node": "^20.4.8",
        "@typescript-eslint/eslint-plugin": "^6.2.1",
        "@typescript-eslint/parser": "^6.2.1",
        "@vueuse/core": "^10.3.0",
        "@vueuse/nuxt": "^10.3.0",
        "autoprefixer": "^10.4.14",
        "cspell": "^6.31.2",
        "eslint": "^8.46.0",
        "eslint-config-prettier": "9.0.0",
        "eslint-plugin-prettier": "^5.0.0",
        "eslint-plugin-simple-import-sort": "^10.0.0",
        "eslint-plugin-vue": "^9.16.1",
        "lint-staged": "^13.2.3",
        "nuxt": "^3.6.5",
        "postcss": "^8.4.27",
        "postcss-html": "^1.5.0",
        "prettier": "3.0.1",
        "prettier-plugin-tailwindcss": "^0.4.1",
        "stylelint": "^15.10.2", …

在我的 Vue 3 应用程序中，用户可以为自己制作多语言页面。他们可以决定其页面上可用的语言。可用的语言是从 API 加载的。

语言加载到 Pinia 存储中，LanguageSwitcher.vue 组件根据浏览器设置、URL 中的语言变量、默认区域设置和可用语言加载默认语言。所有这些都需要严格的赛普拉斯测试，其中之一是确保页面上显示的所选语言实际上是所选的语言。但是我如何从 Cypress 的 i18n 中获取当前选择的语言呢？

我的LanguageSwitcher.vue组件（没有设置初始语言的逻辑）

</script>
<template>
  <div data-testid="localeSwitcher">
    <span v-if="getAvailableLocales().length > 1">
      <span v-for="(locale, i) in getAvailableLocales()" :key="`locale-${locale}`">
        <span v-if="i != 0" class="has-text-warning-dark"> | </span>
        <a  @click="setLocale(locale)" :class="[{ 'has-text-weight-bold' : ($i18n.locale === locale)}, 'has-text-warning-dark']">
          {{ locale.toUpperCase() }}
        </a>
      </span>
    </span>
  </div>
</template>

我的测试加载 i18n 并应该检查当前语言（但不知道如何做到这一点）

__test__/LanguageSwitcher.cy.js

import LanguageSwitcher from '../items/LanguageSwitcher.vue'
import { createI18n } from 'vue-i18n'
import { mount } from '@cypress/vue'
import en from '../../locales/en.json' …