Vue.js是一个开源的，渐进式的Javascript框架，用于构建旨在逐步采用的用户界面。 Vue.js主要用于前端开发，需要中级HTML和CSS。应该标记特定于Vue.js版本2的问题[vuejs2]。
在设计客户端渲染SPA时，Vue3的效果很好。 我可以将对话框组件传送到 。 <--! dialog component example--> 在设计客户端渲染 SPA 时，Vue3 的 效果很好。 我可以将对话框组件传送到 。 <--! dialog component example--> <template> <teleport to="body"> <div class="dialog"> <slot></slot> </div> </teleport> </template> 但是，当我尝试在Nuxt静态模式下使用相同的方式时，却失败了。 Nuxt支持“传送”方法吗？ 在 Nuxt 静态应用程序中还有其他处理传送的解决方法吗？ Portals/Teleport 随 Vue 3 一起到来。Nuxt 尚不支持此功能，因为它仍在 v2 上运行。如果有必要，您可以同时找到替代的第三方软件包。 我可能会误解你在寻找什么，但一种解决方案是使用<ClientOnly>。大多数时候我们只需要在客户端渲染Modal（无需SSR）。 <template> <div class="modal_container"> <ClientOnly> <Teleport to="body"> <div class="modal"> Hello World </div> </Teleport> </ClientOnly> </div> </template> 在NuxtJS 3文档中编写： <Teleport> 的 to 目标需要一个 CSS 选择器字符串或实际的 DOM 节点。 Nuxt 目前仅支持传送到 body 的 SSR，并使用 client-side 包装器为其他目标提供 <ClientOnly> 支持。
创建一个 v-btn-toggle，其按钮垂直对齐，而不是水平对齐
我目前正在尝试使用 VueJS 和 Vuetify 创建一个测验。我正在尝试垂直排列用户可以选择的答案。为此，我尝试使用 v-btn-toggle 组件。然而...
我试图用 v-if 隐藏导航栏中的一个元素。我将获取的布尔值保存在本地存储中。这是我第一次使用 Vue，过去 2 天我一直在用这个，找不到重新...
我目前正在为我的公司建立设计系统。目前，我们有 4 个并行运行的应用程序，我们希望为所有应用程序提供一个单一的设计系统。 所以我们创造了...
如果我有一个名为 的组件，如何从外部访问引用或变量，例如： myCompount.vue ： 从“vue”导入{ref}；...</desc> <question vote="0"> <p>如果我有一个名为 <pre><code><myCompount></code></pre> 的组件，如何从外部访问引用或变量，例如：</p> <p>myCompount.vue：</p> <pre><code><script setup> import { ref } from "vue"; const myString = ref("hi string"); </script> <template> <div> <p>{{ myString }}</p> </div> </template> </code></pre> <p>myPage.vue</p> <pre><code><script setup> import myCompount from "./compounts/myCompount.vue"; import { ref, onMounted } from "vue"; const myCompountRef = ref(); onMounted(() => { console.log(myCompountRef.value.myString) }) </script> <template> <div> <myCompount ref="myCompountRef" /> </div> </template> </code></pre> <h1><strong>如何通过脚本设置来做到这一点：</strong></h1> <p>myCompount.vue：</p> <pre><code><template> <div> <p>{{ myString }}</p> </div> </template> <script> export default { data() { return { myString: "hi string" } } } </script> </code></pre> <p>myPage.vue</p> <pre><code><template> <div> <myCompount ref="myCompountRef" /> </div> </template> <script> import myCompount from "./compounts/myCompount.vue"; export default { components: { myCompount }, mounted() { console.log(this.$refs.myCompountRef.myString) } } </script> </code></pre> <p>是否可以通过某些方式做到这一点？我用的是Nuxt 3，但是没有问题。我只是想知道它是如何工作的...</p> </question> <answer tick="false" vote="0"> <p>您可以使用 <pre><code>defineExpose</code></pre> 宏来公开它：</p> <pre><code><script setup> import { ref } from "vue"; const myString = ref("hi string"); defineExpose({ myString }) </script> <template> <div> <p>{{ myString }}</p> </div> </template> </code></pre> </answer> </body></html>
在 <select> 上使用 v-model 使得第一个选项不会出现在 select 中
我的 HTML： 选项1 选项1 Vue 组件： var 应用 = 新 Vue({ ...
我是 vue.js 的新手。我用铅笔写这个 我是 vue.js 新手。这是我用铅笔写的 <i class="mdi mdi-pencil" @click.prevent="$bvModal.show(type.title)" ></i> 这适用于模态 <b-modal :id="type.title" ref="modal" title="Update holiday" centered hide-footer > <FormModal cardTitle="Update holiday" description="" :value="type.title" action="update" @formData="parseFormData" :holidayTypeID="type.id" ></FormModal> 这就是函数 holidaysTypeUpdate(value, holidayID) { this.$refs["modal"][0].hide(); session .put(`api/holidays/holiday-type/${holidayID}/action/`, { title: value, }) .then(() => { this.alertSchema = { alertVariant: "success", alertMsg: "Holiday updated", show: true, }; this.$bvModal.hide("type.title"); this.fetchHolidayTypes(); }) .catch((e) => { console.log(e.response.data); }); }, 当我按下按钮时，数据会更新，但模式不会关闭。当我更新数据时，我该怎么做才能关闭模式？ 现在我试试这个 holidaysTypeUpdate(value, holidayID) { console.log("holiday is", holidayID, value); this.$bvModal.hide(value); session .put(`api/holidays/holiday-type/${holidayID}/action/`, { title: value, }) .then(() => { this.alertSchema = { alertVariant: "success", alertMsg: "Ο τύπος Αδειας ανανεώθηκε", show: true, }; this.$bvModal.hide('type.title'); this.fetchHolidayTypes(); }) .catch((e) => { console.log(e.response.data); }); }, 但是当我不更改某些内容并按更新时，模式会关闭，但是当我更改某些内容并按更新时，模式不会关闭。
我正在构建由不同 Vite/Vue 项目组成的模块 vue.js 应用程序。 工作流程 - 拥有可以在 vue 应用程序中动态应用的主题插件/ **菜单 **插件。 组成...
将 v-date-picker 绑定到带有格式化日期的 v-text-field
我正在尝试将 v-date-picker 选项绑定到数据格式化的 v-text-field 。我已经在我的应用程序中使用了一个名为 formateDate() 的函数，我正在尝试将其应用于...
为什么当我添加“bg-red rounded”类时“v-col”的宽度会改变？
我正在尝试使用 vuetify 将数据按块排列。当我向“v-col”添加“bg-red rounded”类时，“v-col”的宽度会发生变化。所以我无法获得所需的网格结构...
使用 nuxt.config.js 文件，可以自定义头部内容以添加一些元数据或其他内容： 模块. 导出 = { /* ** 页面标题 */ 头： { title: '很棒的标题',
laravel 和 vue.js 之间惯性通信时间的最佳方式
我正在使用laravel惯性和vue js，现在我面临一个问题，laravel和vue js之间的时间传输总是将自身转换为UTC，这不是我想要的。 示例：我正在使用 UTC+8 时区...
有没有一种方法可以轻松地将 i18n 字符串添加到 .vue 文件中？
我最近学习了 Vue.js Composition API，并正在寻求有关其在生产环境（尤其是在公司）中使用的指导。我不确定是否要同时学习 Options API...
为什么vue的ref不能与Set一起使用而可以与interger一起使用
设备的手表功能无法使用。它可以正常地与 int 一起工作。 如果我将它从 ref() 更改为reactive() 它将起作用。 这是预期的行为吗？ 导入{参考，</desc> <question vote="0"> <p>设备的手表功能无法使用。它可以正常地与 int 一起工作。 如果我将它从 ref() 更改为reactive() 它将起作用。</p> <p>这是预期的行为吗？</p> <pre><code><script setup> import { ref,watch,reactive } from 'vue' const msg = ref('Hello World!') const testSet = ref(new Set()); const testInt = ref(5) watch([testSet],()=>{ console.log(testSet.value); }) watch([testInt],()=>{ console.log(testInt.value); }) const updateTestSet = ()=>{ testSet.value.add(Math.random()); } const updateTestInt = ()=>{ testInt.value = Math.random(); } </script> <template> <h1>{{ msg }}</h1> <input v-model="msg" /> <button @click="updateTestSet">TEST SET</button> <button @click="updateTestInt">TEST INT</button> </template> </code></pre> </question> <answer tick="false" vote="1"> <p>这是预期的行为，Vue 的 <pre><code>Ref<T></code></pre> 仅在其值发生变化时（即为其分配值时）“检测”变化。</p> <p>当您为 <pre><code>testInt.value</code></pre> 分配新数字时，您将替换 Ref 指向的值。但是，当您调用 <pre><code>testSet.value.add(..)</code></pre> 时，您不会替换 Ref 指向的值，因为它仍然是相同的 <pre><code>Set</code></pre> 对象，您只是向该设置对象添加了一个新值。</p> <p>您可以更改观察者来查看该集的内容：</p> <pre><code>watch(() => testSet.value.values(), () => { // code here.. }); </code></pre> </answer> </body></html>
我目前正在通过 Vue 路由器更改页面标题和（在不久的将来）元数据，如下所示： $路线（往返）{ document.title = to.meta.title } 当我检查标题时，这工作正常......
Vue Quill css仅应用于我的第一个Quill Editor组件+如何自定义工具栏
我在 vue-quill 包中遇到了一个奇怪的 CSS 问题。在我的项目中，我有评论，每个评论都有自己的鹅毛笔编辑器来回答评论。为了调试目的，我有机会...
Vue Quill css 仅适用于我的第一个 Quill 编辑器组件
我在 vue-quill 包中遇到了一个奇怪的 CSS 问题。在我的项目中，我有评论，每个评论都有自己的鹅毛笔编辑器来回答评论。为了调试目的，我有机会...
我一直在开发 Vue.js 应用程序来生成发票，此过程的一部分涉及确保每个打印页面显示正确的页码。然而，我遇到了一个障碍：当我......