Vue.js是一个开源的，渐进式的Javascript框架，用于构建旨在逐步采用的用户界面。 Vue.js主要用于前端开发，需要中级HTML和CSS。应该标记特定于Vue.js版本2的问题[vuejs2]。
将点击事件从子组件传递到父组件时，我无法使用点击修饰符。有谁知道我在这里可能做错了什么？ 我有一个这样的组件：
我一直在遵循本指南及其所有步骤：https://www.youtube.com/watch?v=To5XzHlTS_E。但是，当我运行“npm run dev”时，似乎样式没有正确应用，...
Vue 3 Composition API 中的响应式对象未使用 @click 事件进行更新
在使用和更新响应式对象时，我似乎缺少 Vue Composition API 的一些东西。 请参阅下面的代码。我期待点击事件更新 {{colors}} 输出...
我有多个 div 元素，其类基于特殊条件。一旦我从数据库收到数据，我就会检查这个条件。问题是组件在接收之前就被渲染了......
看起来很简单，但我无法让它显示多行。是否可以使用内容来显示？ 以下是 vue.js 组件模板的一部分： Vue.component('标签提供者项目', ...
我有一个使用 vue / vuetify 的项目，我正在尝试将其合并到 Ionic 项目中（后者最初是作为 Ionic 站点的示例）。 原来的项目运行正常，使用vue v...
我正在开发一个基于 Three.js 和 Vue 3 的项目，我正在使用 Bruno Simon 的模板复合体。当我迁移到 Vue 时，lil gui 不再工作了。仍然可见但不可交互，所有...
我用 nuxtui 创建了一个新的 nuxt 项目，启动器看起来很棒。我可以看到在 app.config.ts 文件中设置了主颜色，如下所示，并更改了主属性的值...
获取深层嵌套对象时无法读取 null/undefined 属性
我目前正在从 api 获取一个对象到我的 vue 前端。这个对象有很多属性，甚至是深层嵌套的属性。例如项目对象： { 编号: 1, 标题：“我的项目”， ...
使用 CI/CD 配置对 Vue.js + ASP.NET Web 应用程序的 Azure 部署错误进行故障排除
我已为 Vue.js + ASP.NET Web 应用程序配置了 CI/CD，并希望使用 Web 应用程序将其托管在 Azure 上。我遵循了微软的指南 https://learn.microsoft.com/en-us/visualstudio/javascript/
如何用javascript填充画布中的所有空白区域？ （递归函数）
我尝试创建一个递归函数来填充画布的所有空白空间，直到边缘或已经填充了其他颜色。 函数createFillingPoint() { 让 x = 点[0][0]， ...
我第一次尝试学习 Vue，我正在构建一个应用程序，其中有一个包含数据行的部分。每行都与该元素的大量数据相关联......
如何将图像加载到我的 vuex 操作中并获取图像的值？ 在此处输入图像描述在此处输入图像描述在此处输入图像描述 导入 { RichTextEditorComp...
下面的情况应该发生吗？ 父组件： 导入{参考} ...</desc> <question vote="0"> <p>以下情况应该发生吗？</p> <p>父组件：</p> <pre><code><template> <child v-model:counter="counter" /> </template> <script setup lang="ts"> import {ref} from 'vue'; import child from './child.vue'; const counter = ref(0); </script> </code></pre> <p>子组件：</p> <pre><code><template></template> <script setup lang="ts"> import {onMounted} from 'vue'; const counter = defineModel<number>('counter'); onMounted(()=>{ counter.value++; // now the counter should be 1 console.log(counter.value) // prints 0 }); </script> </code></pre> <p>从<pre><code>counter</code></pre>钩子内部更新模型<pre><code>onMounted</code></pre>后，模型的值仍然是0。这很奇怪，为什么会这样？</p> <p><a href="https://play.vuejs.org/#eNqVUk1PwkAQ/SubvVAithg9QSFRw0ET1KjHvZR2KIvb3c1+AAnhvzvblgrGkHjbnfdm5s282dN7reONBzqiqYNKi8zBlEmS5isuCrK5rlQBYpQrLx2YCaPti1GSIC9NTpJSmxuuHbHgvCYikyXynWUUMV5pZRxpqi6NqkgvTupf6N4bd4y9geWhZQSEyVxJi5lNXzIhSIiGfcxIk6bhlA6wDdKWvIzXVkkcZo8zkKC20lyAedWOYxlGR6RGApYJobbPdcwZD4NjPF9B/vVHfG13IcbomwELZgOMdpjLTAmugWcfL7DDdwfiCr1A9gXwHawSPmhsaA9eFij7hFerfap3xGX5aWc7B9IehwpCA/NQ8xnFzT1eGP1H7m18V+cxecAtdoacncN/Td4rOa/dKk6NRMN+O1nAkkuYhwtLpa8WYKZRr4V7weGuUBT1J1OU34LxJhMerq7GJEmIVFviVtDVtSvl8cgWQG6alkpALFQZnSX3Q6o2XDpLhjj9+UEdvgH1+w70" rel="nofollow noreferrer">Vue 游乐场</a></p> </question> <answer tick="false" vote="0"> <p>显然这<em><strong>是</strong></em>预期的行为。</p> <p>根据 GitHub 上发布的 <a href="https://github.com/vuejs/core/issues/9759" rel="nofollow noreferrer">this issues</a>，在幕后，<pre><code>DefineModel</code></pre> 宏通过父组件改变模型。因此，<pre><code>nextTick</code></pre>应该给出最新值。</p> </answer> </body></html>
所有 Laravel 路线均已公开。如何将其移动到 app.js 或缩小（如果可能）
我在 Laravel、Vue.js 和 Inertia js 项目中使用 Ziggy。在查看页面源代码中，我可以清楚地看到所有 Laravel 路由。 常量 Ziggy...</desc> <question vote="9"> <p>我在 Laravel、Vue.js 和 Inertia js 项目中使用 Ziggy。在查看页面源码中，我可以清楚地看到所有的 Laravel 路由。</p> <pre><code><script type="text/javascript"> const Ziggy = {"url":"http:\/\/127.0.0.1:8787","port":8787,"defaults":{},"routes": ...... "sup_finish_tt_order":{"uri":"front\/finishorder","methods":["POST"]},"assign__tt":{"uri":"front\/assigntt","methods":["POST"]},"technicians":{"uri":"technicians","methods":["GET","HEAD"]},"change-password":{"uri":"change-password","methods":["GET","HEAD"]},"reset.password":{"uri":"c ---------- </script> </code></pre> <p>有什么方法可以在 app.js 中重新定位这个 Ziggy 对象或使其不那么明显吗？根据 <a href="https://github.com/tighten/ziggy" rel="noreferrer">Ziggy</a> 文档和此处尝试的答案，我尝试将其导入 app.js,a 但它不起作用。</p> <blockquote> <p>未捕获的类型错误：无法读取未定义的属性“原型” 在 Object.inherits (app.js:124712) 在对象。 （应用程序.js：68991） 在对象../node_modules/irc/lib/irc.js (app.js:69342) 在 <strong>webpack_require</strong> (app.js:64) 在对象../node_modules/ziggy/index.js (app.js:140181) 在 <strong>webpack_require</strong> (app.js:64) 在模块../resources/js/app.js (app.js:141504) 在 <strong>webpack_require</strong> (app.js:64) 在 Object.0 (app.js:142081) 在 <strong>webpack_require</strong> (app.js:64)</p> </blockquote> <p><strong>___________________________设置______________________________________</strong></p> <p>//后端</p> <pre><code>$ php artisan ziggy:generate File generated! </code></pre> <p>// 示例 /resources/js/ziggy.js 文件 </p> <pre><code>const Ziggy = {"url":"http:\/\/127.0.0.1:8787","port":8787,"defaults":{},"routes":{"debugbar.openhandler":{"uri":"_debugbar\/open" /*..... All named routes as expeted */ if (typeof window !== 'undefined' && typeof window.Ziggy !== 'undefined') { for (let name in window.Ziggy.routes) { Ziggy.routes[name] = window.Ziggy.routes[name]; } } export { Ziggy }; </code></pre> <p>///resources/js/app.js</p> <pre><code>require('./bootstrap') import Vue from 'vue' import VueMeta from 'vue-meta' import PortalVue from 'portal-vue' import { App, plugin } from '@inertiajs/inertia-vue' import { InertiaProgress } from '@inertiajs/progress/src' // Ziggy start here import route from 'ziggy'; import { Ziggy } from './ziggy'; Vue.mixin({ methods: { route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config), }, }); // ziggy end here import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' Vue.use(BootstrapVue) Vue.use(IconsPlugin) import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' import { mixins } from 'vue-chartjs' import TreeBrowser from './Pages/globalComponents/TreeBrowser.vue' //Vue.config.productionTip = false Vue.mixin({ methods: { route: window.route } }) Vue.use(plugin) Vue.use(PortalVue) Vue.use(VueMeta) Vue.component('TreeBrowser', TreeBrowser) InertiaProgress.init() let app = document.getElementById('app') new Vue({ metaInfo: { titleTemplate: (title) => title ? `${title} - FNV` : 'FNV yours' }, render: h => h(App, { props: { initialPage: JSON.parse(app.dataset.page), resolveComponent: name => import (`./Pages/${name}`).then(module => module.default), }, }), }).$mount(app) </code></pre> <p> // /webpack.mix.js</p> <pre><code>const mix = require('laravel-mix'); const path = require('path'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.webpackConfig({ resolve: { alias: { ziggy: path.resolve('vendor/tightenco/ziggy/dist'), }, }, }); </code></pre> <p>Login.vue 中 ziggy ex 的使用</p> <pre><code>this.$inertia.post(this.route('login.attempt'), data, { onStart: () => this.sending = true, onFinish: () => this.sending = false, }) ``` </code></pre> </question> <answer tick="false" vote="9"> <p>这里是 Ziggy 的维护者。 <a href="https://stackoverflow.com/a/66177021/6484459">FightInGlory 的答案</a>是正确的。</p> <p>运行<pre><code>php artisan ziggy:generate</code></pre>。</p> <p>然后，在您的 <pre><code>webpack.mix.js</code></pre> 文件中：</p> <pre><code>const path = require('path'); // Mix v6 mix.alias({ ziggy: path.resolve('vendor/tightenco/ziggy/dist'), }); // Or, Mix v5 mix.webpackConfig({ resolve: { alias: { ziggy: path.resolve('vendor/tightenco/ziggy/dist'), }, }, }); </code></pre> <p>然后，在您要使用 Ziggy 的文件中：</p> <pre><code>import route from 'ziggy'; // Change './ziggy' to the relative path to the file generated above, usually resources/js/ziggy.js import { Ziggy } from './ziggy'; // ... route('posts.show', 1, undefined, Ziggy); </code></pre> <p>如果您使用 Vue，创建一个全局 mixin 会很有帮助，这样您就不需要每次都将 <pre><code>Ziggy</code></pre> 作为第四个参数传递。 <a href="https://github.com/tighten/ziggy#vue" rel="noreferrer">文档中</a>有一个如何设置的示例。</p> <p>如果仍然不起作用，请随时提交问题并详细说明您的设置！</p> </answer> <answer tick="true" vote="4"> <p>如果您不使用 Blade，或者不想使用 @routes 指令，Ziggy 提供了一个 artisan 命令来将其配置和路由输出到文件：php artisan ziggy:generate</p> <pre><code>import route from 'ziggy'; import { Ziggy } from './ziggy'; Vue.mixin({ methods: { route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config), }, }); </code></pre> <p>您可以选择创建一个 webpack 别名，以便更轻松地导入 Ziggy 的核心源文件</p> <pre><code>// webpack.mix.js // Mix v6 const path = require('path'); mix.alias({ ziggy: path.resolve('vendor/tightenco/ziggy/dist'), }); // Mix v5 const path = require('path'); mix.webpackConfig({ resolve: { alias: { ziggy: path.resolve('vendor/tightenco/ziggy/dist'), }, }, }); </code></pre> <p>这意味着您应该更改此处的路径“.ziggy”</p> <pre><code>import { Ziggy } from './ziggy'; </code></pre> </answer> <answer tick="false" vote="2"> <p>在 Middleware/HandleInertiaRequests.php 上注释或删除 Ziggy 数组，如下所示：</p> <pre><code>public function share(Request $request) { return array_merge(parent::share($request), [ 'auth' => [ 'user' => $request->user(), ], // 'ziggy' => function () { // return (new Ziggy)->toArray(); // }, ]); } </code></pre> </answer> </body></html>
Bootstrap 5 选项卡不会根据 vue 3 项目中的选项卡单击而更改
我正在尝试使用 bootstrap 5 构建一个 vue3 应用程序。我正在添加选项卡。我可以单击选项卡，但选项卡内容停留在初始选项卡上。我该如何解决这个问题？ 包.json： { “名字&...
如何在 Vue 组件（不带 Webpack）中使用非 Vue 自定义 Web 组件？
我有以下代码... {{ 信息 }} 我有以下代码... <html> <head></head> <body> <div id="app"> {{ message }} <jrg-element></jrg-element> </div> <script type="module"> import Vue from "//unpkg.com/vue/dist/vue.esm.browser.js"; import {ShadowElement, CREATE_ELEMENT} from "//unpkg.com/@jrg/ui/target/jrg-ui.esm.mjs"; class JrgElement extends ShadowElement { constructor() { super("<h1>CustomElement</h1>"); this.render(); } } CREATE_ELEMENT("jrg-element", JrgElement, {}); const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html> 但是当我跑步时我得到...... 如果我注释掉 Vue 部分，一切都会正常。如何在 Vue 中使用自定义元素？ 更新 我尝试更新到... CREATE_ELEMENT("jrg-element", JrgElement, {}); Vue.config.ignoredElements = ['jrg-element'] const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); 但我还是明白... 结果是 Vue 元素渲染，但自定义元素不渲染。 完整代码 更新2 我尝试等待 dom 加载，就像...... document.addEventListener("DOMContentLoaded", function() { new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); }); 但结果是一样的 Vite 2 是这样的： plugins: [ vue({ template: { compilerOptions: { isCustomElement: tag => tag === 'jrg-element' } } }) ], 来源：https://github.com/vitejs/vite/issues/1312 Vue 模板（在您的情况下为 app div 的内容）由 Vue 模板编译器编译，并期望所有自定义元素都是 Vue 组件并正确注册。为了告诉 Vue 您正在使用一些非 Vue 自定义元素（Web Components API），您需要配置编译器。 Vue 2.x Vue.config.ignoredElements = ['jrg-element'] Vue 3 const app = Vue.createApp({}) app.config.isCustomElement = tag => tag === 'jrg-element' 文档 我也有同样的问题。然而，我发现我试图通过修改属性（例如 HTMLElement className）在构造函数中做太多事情。 将不仅仅是变量初始化的任何无关代码从 constructor() 移出并移至 attributeChangedCallback() 或connectedCallback() 中。这为我解决了。
将 HTML 内容下载为在 VueJS 预览中呈现的 page.html
我开发了一个基于VueJS的前端内容管理应用程序。 我正在寻求在应用程序中集成“下载”按钮功能。此功能将使用户能够
我目前正在开发一个项目，学习 Inertja + Vue + Tailwind 以添加到我的 Laravel 堆栈中。我目前正致力于处理通过 axios 对后端调用的响应。我想创造...
使用@koumoul/vjsf在Vue3中生成基于模式的表单
如何在 vue 3 中使用 VJSF？我使用 vite 作为构建工具。 我按照文档尝试了安装步骤。但是我收到来自 vite 的错误， 强制重新优化