当我需要标签内容中的本地化文本时，我会执行以下操作
<span>{{ $t('myText') }}</span>
但我找不到为标签属性添加本地化文本的方法。我试过
<v-text-field
label="{{ $t('myText') }}"
></v-text-field>
但没有成功。有人能说一下该怎么做吗？
我有一个在 JavaScript 中工作的组件属性，但在 Typescript 中遇到问题：
props: {
keep_open: {
type: Array,
default: () => [],
}
}
这个定义在这里并没有失败，而是在代码的后面：
let keepOpen: Array<string> = [this.data.popupId];
this.keep_open.forEach((id) => {
keepOpen.push(id);
});
Keep_Open 中的 id 是未定义类型，不会推入 KeepOpen。
我该如何解决这个问题，无论是在后面的代码中还是在属性的定义中？
我有父/子组件，并通过代理和不使用代理绑定对象数组：
const selectedTags = ref([]);
const tags = [
{
id: 'efrwe',
},
{
id: 'dhjhe23',
}];
<Child :tags="tags" :selectedTags="selectedTags">
在子组件中，我将选定的元素从“tags”添加到“selectedTags”，它对源数组中的对象的引用！
props.selectedTags.push(tags[0]);
但后来我尝试比较同一个对象上的这个引用，我返回 false！
console.log(tags[0] == selectedTags[0]); // false
你说“好吧，你尝试比较代理对象和清除对象”，但我尝试与代理目标进行比较并再次返回 false！
console.log(tags[0] == selectedTags[0].target); // false
console.log(tags[0] == selectedTags.target[0]); // false
我也尝试使用“价值”
console.log(tags[0] == selectedTags[0].value); // false
console.log(tags[0] == selectedTags.value[0]); // false
我如何比较 vue 3 中同一对象的引用？
我想你明白我想要做的，计算返回非选定的项目：
let nonSelected = computed(() =>
props.tags.filter(t => props.selectedTags.every(s => s != t))
);
我通过引导项目内容然后构建它以进行部署来编写（业余）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(*) 我实际上使用Quasar 框架，但这并没有改变我问题的核心。
\n我正在使用 tailwind 和 typescript 制作一个演示 Vue.js 3 应用程序。每当我运行该应用程序时，我都会收到错误消息：
This relative module was not found:
* ./src/main.js in multi (webpack)-dev-server/client?https://192.168.2.102:8090&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
主要.ts
import { createApp } from 'vue';
import App from './App.vue'
import router from './router'
import './styles/app.css';
createApp(App)
.use(router)
.mount('#app');
应用程序.vue
<template>
<div class="justify-center flex bg-yellow-300 items-center h-screen">
<div class="text-4xl">
{{ hello }}
</div>
</div>
</template>
<script lang="ts">
import {Vue} from "vue-property-decorator";
export default class App extends Vue {
hello = 'Hello world'
}
</script>
vue.config.js
module.exports = { …我可以在vue3的setup函数中引用css模块中的类名吗？
<script setup>
console.log(this.$style.myClass) // this won't work
</setup>
<style lang="scss" module>
.myClass {
}
</style>
如果我尝试element-plus直接使用该组件，导入工作得很好。
我想做的是从element-plus库中扩展一个组件（它使用composition apiVue 3 中的组件）并向我的组件和方法添加一些附加属性。
在 Vue 2 中，它看起来像这样：
export default {
extends: SomeComponent
}
在 Vue 3 中，这似乎不再起作用了。
我读过有关DefineComponent 的内容，但到目前为止，还没有成功实现它。
有人能给我一些灯光吗？谢谢。
我拼命尝试watch在propVue3（3.2.31，Composition API）中：
<script lang="ts" setup>\nimport { toRef, watch } from \'vue\'\n\nconst props = defineProps({\n \'trigger-refresh\': {\n type: String\n }\n})\nconst triggerRefresh = toRef(props, \'trigger-refresh\')\nwatch(triggerRefresh, (a, b) => console.log(\'props triggered refresh\'))\n</script>\n我触发了 的发射trigger-refresh，它通过上面的代码传递给组件，并且我看到triggerRefreshDevTools\xe2\x86\x92Vue 中发生了变化。
watch因此，除了未触发（即控制台上没有消息）之外，组件内部的一切都很好。
我阅读了Watchers 的文档以及对有关观看道具的问题的答复（其中一个答复几乎与我所做的相同），但我只是无法理解为什么这在我的情况下不起作用。
\n我想显示一些html从数据库中获取的内容quill editor。似乎html很好（在<p>段落中显示）并且绑定到quill editorvia v-model，但它只是不显示：
<template>
<div id="text-editor" class="text-editor">
<quill-editor :modules="modules" :toolbar="toolbar" v-model:content="store.re.body" contentType="html"/>
<p>{{store.re.body}}</p>
</div>
</template>
<script setup>
import BlotFormatter from 'quill-blot-formatter'
import store from "../../../js/store";
store.re.body = ''
const modules = {
module: BlotFormatter,
}
const toolbar = [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'align': [] }],
[{ 'list': …我试图在子组件中动态加载图像，但图像没有加载。
这是我尝试过的：
基本的 :src="imagePath" 未加载
require 不再可用，因此不起作用
import( ../${imagePath}) 返回一个未定义的 Promise
这是我的代码：
<script setup lang="ts">
import TheProject from './utils/TheProject.vue';
const projects = [
{
idProject: 1,
title: "title",
desc: "desc",
imagePath: "../path/..",
cardColor: "C4F6DE"
},
]
</script>
<template>
<div v-for="project in projects">
<TheProject :idProject="project.idProject" :title="project.title"
:desc="project.desc" :imagePath="project.imagePath" :cardColor="project.cardColor" />
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
const props = defineProps({
idProject: Number,
title: String,
desc: String,
imagePath: String,
cardColor: String
})
</script>
<template> …vuejs3 ×10
vue.js ×8
javascript ×2
typescript ×2
element-plus ×1
migration ×1
quill ×1
src ×1
vite ×1
vue-i18n ×1
vue-props ×1
vuejs2 ×1
vuetifyjs3 ×1
watch ×1
wysiwyg ×1