vuejs2 相关问题

将此标记用于特定于Vue.js版本2的问题,这是一个用于构建用户界面的开源,渐进式Javascript框架。

在浏览器中使用的VueNumberFormat(UMD)

我想在浏览器中使用 VueNumberFormat (vue 2 库)。 我在 html 页面中加载库 <question vote="0"> <p>我想在浏览器中使用 VueNumberFormat (vue 2 库)。</p> <p>我在我的 html 页面中加载库</p> <pre><code>&lt;script src=&#34;https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="285e5d4d05465d454a4d5a054e475a45495c6819061b0619">[email protected]</a>/dist/library.js&#34;&gt;&lt;/script&gt; </code></pre> <p>接下来在我的 js 文件中我尝试使用这个库</p> <pre><code>Vue.use(VueNumberFormat, {prefix: &#39;R$ &#39;, decimal: &#39;,&#39;, thousand: &#39;.&#39;}); </code></pre> <p>页面加载后,我在浏览控制台中出现错误</p> <pre><code>library.js:3 Uncaught ReferenceError: require is not defined at library.js:3:11 </code></pre> <p>有什么方法可以在浏览器环境中使用这个或另一个库吗?</p> </question> <answer tick="false" vote="0"> <p>您正在使用的 cdn 链接使用 <pre><code>require</code></pre>,因此使其正常工作可能会很棘手。</p> <p>cdn 包含一个 esm 模块,您可以像这样使用</p> <pre><code>&lt;script type=&#34;module&#34;&gt; import vueNumberFormat from &#39;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="6b1d1e0e46051e06090e19460d0419060a1f2b5a4558455a">[email protected]</a>/+esm&#39; &lt;/script&gt; </code></pre> <p>但是如果您不熟悉使用 esm 模块,这可能会令人困惑。</p> <p>或者,github存储库包含可以直接使用的umd文件<a href="https://github.com/igortrinidad/vue-number-format/blob/d5345761b21475d489e31ef94411f8dfd0363b13/dist/VueNumberFormat.umd.min.js" rel="nofollow noreferrer">https://github.com/igortrinidad/vue-number-format/blob/d5345761b21475d489e31ef94411f8dfd0363b13/dist/VueNumberFormat.umd.min.js</a> 我找不到为此的 CDN,因此您必须下载此文件并自行托管它或为此找到一些 CDN,或者作为最后的手段将内容包含在脚本标记中</p> <pre><code>&lt;script&gt; (function(e,t){&#34;object&#34;===typeof exports&amp;&amp;&#34;object&#34;===typeof module?module.exports=t(require(&#34;vue&#34;)):&#34;function&#34;===typeof define&amp;&amp;define.amd?define([],t):&#34;object&#34;===typeof exports?exports[&#34;VueNumberFormat&#34;]=t(require(&#34;vue&#34;)):e[&#34;VueNumberFormat&#34;]=t(e[&#34;Vue&#34;])})(&#34;undefined&#34;!==typeof self?self:this,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){&#34;undefined&#34;!==typeof Symbol&amp;&amp;Symbol.toStringTag&amp;&amp;Object.defineProperty(e,Symbol.toStringTag,{value:&#34;Module&#34;}),Object.defineProperty(e,&#34;__esModule&#34;,{value:!0})},n.t=function(e,t){if(1&amp;t&amp;&amp;(e=n(e)),8&amp;t)return e;if(4&amp;t&amp;&amp;&#34;object&#34;===typeof e&amp;&amp;e&amp;&amp;e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,&#34;default&#34;,{enumerable:!0,value:e}),2&amp;t&amp;&amp;&#34;string&#34;!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&amp;&amp;e.__esModule?function(){return e[&#34;default&#34;]}:function(){return e};return n.d(t,&#34;a&#34;,t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p=&#34;&#34;,n(n.s=&#34;fb15&#34;)}({&#34;025e&#34;:function(e,t,n){&#34;use strict&#34;;n.d(t,&#34;a&#34;,(function(){return o})),n.d(t,&#34;d&#34;,(function(){return u})),n.d(t,&#34;b&#34;,(function(){return i})),n.d(t,&#34;c&#34;,(function(){return a}));var r=n(&#34;ffd9&#34;);const o=(e=0,t=r[&#34;a&#34;])=&gt;{null===e&amp;&amp;(e=0);const n=Object.assign({},r[&#34;a&#34;],t);&#34;number&#34;!==typeof e||n.isInteger||(e=e.toFixed(s(n.precision)));const o=m(e,n.acceptNegative)?&#34;-&#34;:&#34;&#34;,u=c(e),i=f(u,n.precision),a=d(i).split(&#34;.&#34;);var b=a[0];const v=a[1];return b=p(b,n.thousand),o+n.prefix+l(b,v,n.decimal)+n.suffix},u=(e=0,t={precision:2,isInteger:!1,acceptNegative:!0})=&gt;{null===e&amp;&amp;(e=0);const n=Object.assign({},r[&#34;a&#34;],t);var o=m(e,n.acceptNegative)?-1:1,u=c(e),i=f(u,n.precision);return n.isInteger?parseInt(`${m(e,n.acceptNegative)?&#34;-&#34;:&#34;&#34;}${u.toString()}`):parseFloat(i)*o},i=(e,t)=&gt;{var n=function(){e.setSelectionRange(t,t)};e===document.activeElement&amp;&amp;setTimeout(n,1)},a=(e,t=r[&#34;a&#34;])=&gt;{var n=e.value.length-e.selectionEnd;e.value=o(e.value,t),n=Math.max(n,t.suffix.length),n=e.value.length-n,n=Math.max(n,t.prefix.length+1),i(e,n)};function c(e){return d(e).replace(/\D+/g,&#34;&#34;)||&#34;0&#34;}function s(e){return Math.max(0,Math.min(e,20))}function f(e,t){var n=Math.pow(10,t),r=parseFloat(e)/n;return r.toFixed(s(t))}function p(e,t){return e.replace(/(\d)(?=(?:\d{3})+\b)/gm,&#34;$1&#34;+t)}function l(e,t,n){return t?e+n+t:e}function d(e){return e?e.toString():&#34;&#34;}function m(e,t=!0){if(!t)return!1;&#34;string&#34;!=typeof e&amp;&amp;(e=e.toString());const n=e.indexOf(&#34;+&#34;)&gt;=0,r=0!==e&amp;&amp;e.indexOf(&#34;-&#34;)&gt;=0||&#34;-&#34;==e[e.length-1];return!(n||!r)}},&#34;6b0d&#34;:function(e,t,n){&#34;use strict&#34;;Object.defineProperty(t,&#34;__esModule&#34;,{value:!0}),t.default=(e,t)=&gt;{const n=e.__vccOpts||e;for(const[r,o]of t)n[r]=o;return n}},&#34;7fb5&#34;:function(e,t,n){&#34;use strict&#34;;var r=n(&#34;8bbf&#34;);const o=[&#34;value&#34;];function u(e,t,n,u,i,a){return Object(r[&#34;openBlock&#34;])(),Object(r[&#34;createElementBlock&#34;])(&#34;input&#34;,{value:a.formattedValue,inputmode:&#34;numeric&#34;,onInput:t[0]||(t[0]=e=&gt;a.onInput(e)),onFocus:t[1]||(t[1]=e=&gt;a.onFocus(e))},null,40,o)}var i=n(&#34;025e&#34;),a=n(&#34;ffd9&#34;),c={name:&#34;VueNumberFormat&#34;,props:{value:{type:[String,Number],default:null},options:{type:Object,default:()=&gt;{}}},emits:[&#34;input&#34;,&#34;update:value&#34;],computed:{mergedOptions(){const e=this.$vueNumberFormatOptions||a[&#34;a&#34;];return this.options?Object.assign({},e,this.options):e},formattedValue(){return Object(i[&#34;a&#34;])(this.value,this.mergedOptions)}},created(){this.$vueNumberFormatOptions||(this.$vueNumberFormatOptions=a[&#34;a&#34;])},methods:{onFocus(e){Object(i[&#34;b&#34;])(e.target,e.target.value.length-this.mergedOptions.suffix.length)},onInput(e){Object(i[&#34;c&#34;])(e.target,this.mergedOptions);const t=Object(i[&#34;d&#34;])(e.target.value,this.mergedOptions);this.updateValue(t)},updateValue(e){this.$vueNumberFormatOptions&amp;&amp;&#34;v2&#34;===this.$vueNumberFormatOptions.vueVersion?this.$emit(&#34;input&#34;,e):this.$emit(&#34;update:value&#34;,e)}}},s=n(&#34;6b0d&#34;),f=n.n(s);const p=f()(c,[[&#34;render&#34;,u]]);t[&#34;a&#34;]=p},&#34;8bbf&#34;:function(t,n){t.exports=e},b635:function(e,t,n){&#34;use strict&#34;;(function(e){var r=n(&#34;7fb5&#34;),o=n(&#34;ffd9&#34;),u=n(&#34;025e&#34;);const i=(e,t)=&gt;{if(i.installed)return;i.installed=!0,e.component(&#34;VueNumberFormat&#34;,r[&#34;a&#34;]);const n=Object.assign({},o[&#34;a&#34;],t);&#34;undefined&#34;!=typeof e.prototype?(n.vueVersion=&#34;v2&#34;,e.prototype.$vueNumberFormatOptions=n):(n.vueVersion=&#34;v3&#34;,e.config.globalProperties.$vueNumberFormatOptions=n),e.mixin({methods:{vueNumberFormat(e,t=n){const r=Object.assign({},n,t);return Object(u[&#34;a&#34;])(e,r)},vueNumberUnformat(e,t=n){const r=Object.assign({},n,t);return Object(u[&#34;d&#34;])(e,r)}}})};Object.assign(r[&#34;a&#34;],{install:i,format:u[&#34;a&#34;],unformat:u[&#34;d&#34;]});let a=null;&#34;undefined&#34;!==typeof window?a=window.Vue:&#34;undefined&#34;!==typeof e&amp;&amp;(a=e.Vue),a&amp;&amp;a.use(r[&#34;a&#34;]),t[&#34;a&#34;]=r[&#34;a&#34;]}).call(this,n(&#34;c8ba&#34;))},c8ba:function(e,t){var n;n=function(){return this}();try{n=n||new Function(&#34;return this&#34;)()}catch(r){&#34;object&#34;===typeof window&amp;&amp;(n=window)}e.exports=n},fb15:function(e,t,n){&#34;use strict&#34;;if(n.r(t),&#34;undefined&#34;!==typeof window){var r=window.document.currentScript,o=r&amp;&amp;r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&amp;&amp;(n.p=o[1])}var u=n(&#34;b635&#34;);t[&#34;default&#34;]=u[&#34;a&#34;]},ffd9:function(e,t,n){&#34;use strict&#34;;t[&#34;a&#34;]={prefix:&#34;R$ &#34;,suffix:&#34;&#34;,decimal:&#34;,&#34;,thousand:&#34;.&#34;,precision:2,acceptNegative:!0,isInteger:!1}}})})); &lt;/script&gt; </code></pre> </answer> </body></html>

回答 0 投票 0

移动端h5页面,ios 17+视频画面显示不全

在此输入图片描述移动端h5页面,ios 17+中视频画面显示有问题。有人遇到过这种情况吗?宽度和高度...

回答 1 投票 0

防止点击背景时模态关闭[Vuejs]

我正在使用 vue-js-modal 库并遵循文档中的相同步骤,但我需要实现当模式打开时用户在单击背景时无法关闭模式

回答 5 投票 0

检查使用vue-router时是否可以前进

我正在使用Vue2和Vue-router(版本^2.2.0)开发一个应用程序,后退和前进导航按钮必须显示用户是否可以后退/前进。 检查用户是否可以...

回答 3 投票 0

如何用Vuejs通过点击改变两个开关数据

请有人教我点击时交换两个不同数据的方法 例如我们有一个数据 数据() { 返回 { 数据一:[ { 名称:“西莫&...

回答 1 投票 0

如何通过 typescript 在 Vue2 中使用带有组合 api 的 vue 类组件

从 'vue-property-decorator' 导入 { Component, Vue } 从 '@/composables/customerRepository' 导入 { CustomerContext, getCustomerRepository } @成分 出口</desc> <question vote="7"> <pre><code>&lt;script lang=&#34;ts&#34;&gt; import { Component, Vue } from &#39;vue-property-decorator&#39; import { CustomerContext, getCustomerRepository } from &#39;@/composables/customerRepository&#39; @Component export default class CustomerList extends Vue { search = &#39;&#39; setup(): CustomerContext { const ctx = getCustomerRepository() return ctx } } &lt;/script&gt; </code></pre> <p>在 Vue 2 中,我想通过 TypeScript 将 Composition API 与类组件样式一起使用,但我不确定语法是否正确。此外,<pre><code>setup()</code></pre>函数不会自动调用。</p> <p><pre><code>vue-class-component</code></pre>可以在 TypeScript 中使用 Compostion API 吗?</p> </question> <answer tick="true" vote="21"> <h3>Vue 2</h3> <p>首先,确保您已经安装了 Vue 2 的 <a href="https://www.npmjs.com/package/@vue/composition-api" rel="noreferrer"><pre><code>@vue/composition-api</code></pre></a> 插件:</p> <pre><code>// main.ts import Vue from &#39;vue&#39; import VueCompositionApi from &#39;@vue/composition-api&#39; Vue.use(VueCompositionApi) </code></pre> <p>然后将 <pre><code>setup()</code></pre> 定义为 <pre><code>@Component</code></pre> 选项(而不是类方法):</p> <pre><code>// MyComponent.vue @Component({ setup(props, context) { //... } }) export default class CustomerList extends Vue { //... } </code></pre> <h3>Vue 3</h3> <p>对于 Vue 3,<pre><code><a href="/cdn-cgi/l/email-protection" data-cfemail="a4d2d1c189c7c8c5d7d789c7cbc9d4cbcac1cad0e49c8adc">[email protected]</a></code></pre> 导出一个 <pre><code>setup()</code></pre> API,您可以将其分配给局部变量:</p> <pre><code>&lt;template&gt; &lt;div&gt;counter: {{myContext.counter}}&lt;/div&gt; &lt;button @click=&#34;myContext.increment&#34;&gt;Increment&lt;/button&gt; &lt;/template&gt; &lt;script lang=&#34;ts&#34;&gt; import { Vue, setup } from &#39;vue-class-component&#39; import { ref } from &#39;vue&#39; export default class MyComponent extends Vue { myContext = setup(() =&gt; { const counter = ref(0) return { counter, increment() { counter.value++ } } }) } &lt;/script&gt; </code></pre> <p><em><strong>注意:</strong> 从 <pre><code><a href="/cdn-cgi/l/email-protection" data-cfemail="f1878494dc929d908282dc929e9c819e9f949f85b1c9dfc1dfc1dc8392dfc0">[email protected]</a></code></pre> 开始,<pre><code>setup()</code></pre> 不接收任何参数,包括来自选项 API<a href="https://v3.vuejs.org/guide/composition-api-setup.html#arguments" rel="noreferrer"> 中使用的 <pre><code>context</code></pre> 的 <pre></pre><code>props</code><pre> 和 </pre><code>setup()</code></a> 参数。</em></p> </answer> <answer tick="false" vote="0"> <p>使用class来编写setup,支持vue2和vue3</p> <pre><code>&lt;template&gt; &lt;p&gt;{{ count.text }}&lt;/p&gt; &lt;/template&gt; &lt;script lang=&#34;ts&#34;&gt; import { defineComponent } from &#39;vue&#39;; import { Setup, Hook } from &#39;vue-class-setup&#39;; @Setup class Count { public value = 0; public get text() { return String(this.value); } @Hook(&#39;mounted&#39;) public init() { this.value++; } } export default defineComponent({ setup() { return { count: new Count() } } }) &lt;/script&gt; </code></pre> <p><a href="https://github.com/fmfe/vue-class-setup" rel="nofollow noreferrer">https://github.com/fmfe/vue-class-setup</a></p> </answer> <answer tick="false" vote="0"> <pre><code>import ClassComponent from &#39;vue-class-component&#39; ClassComponent.registerHooks([&#39;setup&#39;]) </code></pre> <p>将其放在项目的开头,然后一切都会按您的预期进行</p> </answer> </body></html>

回答 0 投票 0

Element UI 日期时间选择器禁用当前时间之前的小时和分钟

我使用的是element-ui 2.15.7。如何禁用当前时间之前的小时和分钟。例如,当前时间是 27/11/2023 1:41 pm,所以我希望日期选择器禁用 0 -> 12 小时(仅 sh...

回答 1 投票 0

在vue实例中使用子标签时,错误组件未定义

我刚刚开始学习 vuejs,我尝试运行一些代码来应用我所学到的知识,通过使用 Vue.component('nameOfComponent', { }); 在 vue 实例中创建一个基本组件,还

回答 1 投票 0

如何在vue生命周期钩子中使用vuex使用async/await?

当我在 Mounted() 生命周期挂钩中的 App.vue 组件中分派一个操作时,它会在其他组件加载后运行。我在操作中使用 async/await 并安装了生命周期挂钩。 应用程序.vue 文件 方法...

回答 3 投票 0

在Vue.JS中,如何将props值传递和更改到嵌套组件中?

我的要求非常基本且简单,但不知道为什么 ChatGPT 一直给我带有警告消息的答案。 我正在使用 Vue 2。 我有三个嵌套组件:GrandParentComponent,

回答 1 投票 0

基本选项在 vue-router 中如何工作

如基本选项文档中所述(适用于 v3): 应用程序的基本 URL。例如,如果整个单页应用程序在 /app/ 下提供服务,则 base 应使用值“/...

回答 4 投票 0

Vuejs。无法设置未定义的属性(设置)

数据(){ 返回 { 订单数量:空, } }, 方法: { 显示数量(产品 ID){ this.carts.filter(函数(购物车) { 如果(购物车.产品_...

回答 1 投票 0

错误:找不到模块“nanoid/non-secure”

我的项目直到今天才开始建设。为了清楚起见,我没有改变任何东西。奇怪的是,另一个我几周没有碰过的 NPM 项目也发生了这种情况。 我收到了...

回答 2 投票 0

如何在使用create-vue创建的VueJS2项目上添加Vuetify2

我有一个现有的 Vue2 项目,它是使用 create-vue 创建的。 由于该项目位于 vue2 中,为了能够使用 Vuetify,我需要使用 v2。但问题是如何添加呢?在 Vuetify v2 文档中,...

回答 1 投票 0

Vue.js 2:可以使用带有“v-for”的多个“模板”吗?

对于客户项目,我需要使用 Vue.js 版本 2。 在组件中,我对一些使用 和 v-for 的字段定义 JSON 进行了 2 次迭代。 无论我放置哪一个迭代...... 对于客户项目,我需要使用 Vue.js 版本 2。 在组件中,我对一些使用 <template> 和 v-for 的字段定义 JSON 进行了 2 次迭代。 无论我首先放置哪一个迭代,都将被忽略 - 内容永远不会显示。如果我改变他们的顺序,它将是相应的另一个。 大量编辑:现在包括一个可重现的示例,希望 src/__tests__/ConcreteFormComponentFillingSlots.spec.js // @vitest-environment jsdom import { describe, expect, it } from 'vitest' import { mount } from '@vue/test-utils' import ConcreteFormComponentFillingSlots from '@/__tests__/ConcreteFormComponentFillingSlots.vue' describe('My bug with multiple template v-for iterations', () => { it('renders all form fields', () => { const wrapper = mount(ConcreteFormComponentFillingSlots) const renderedHtml = wrapper.html() console.log(`\n\n### + ${renderedHtml}\n\n####`) expect(renderedHtml).includes('Search | Key: |searchResultSlot1|') expect(renderedHtml).includes('Search | Key: |searchResultSlot2|') expect(renderedHtml).includes('Upload | Key: |uploadResultSlot1|') expect(renderedHtml).includes('Upload | Key: |uploadResultSlot2|') }) }) src/__tests__/GenericFormComponentWithSlots.vue <script> export default { name: 'GenericFormComponentWithSlots', props: { id: String, formConfig: Object }, data () { return { pageSelectionIndex: 0, sectionSelectionIndex: 0 } }, methods: { getFieldLabel (field) { return field.label } }, computed: { getSelectedSection () { return this.formConfig.sections[this.sectionSelectionIndex] } } } </script> <template> <div v-bind:id="`c_smart-form-body_some_id`" class="c_smart-form-body"> <transition-group name="show" tag="div"> <template v-for="(field) in getSelectedSection.fields"> <div v-bind:key="`${field.id}_${pageSelectionIndex}_outerForm`" class="c_smart-form-field"> <div v-if="field.type === 'Slot'"> <p v-html="'Slot goes here: field(' + field.id + ')'"/> <slot v-bind:name="`field(${field.id})`" v-bind:field="field"> </slot> </div> <div v-else> <p v-html="'Unknown field type: ' + field.type + ' for field ' + field.id"/> </div> </div> </template> </transition-group> </div> </template> <style lang="less"> </style> src/__tests__/ConcreteFormComponentFillingSlots.vue <script> import GenericFormComponentWithSlots from '@/__tests__/GenericFormComponentWithSlots.vue' import theUserForm from '@/__tests__/the-user-form.json' import _ from 'lodash' export default { name: 'ConcreteFormComponentFillingSlots', mixins: [ ], components: { GenericFormComponentWithSlots }, props: { }, data () { return { customForm: _.cloneDeep(theUserForm), uploadFieldConfigs: { uploadResultSlot1: { isUploading: false, slotName: 'field(uploadResultSlot1)' }, uploadResultSlot2: { isUploading: false, slotName: 'field(uploadResultSlot2)' } }, searchFieldConfigs: { searchResultSlot1: { slotName: 'field(searchResultSlot1)' }, searchResultSlot2: { slotName: 'field(searchResultSlot2)' } } } } } </script> <template> <div class="custom-task-content-container"> <GenericFormComponentWithSlots v-if="customForm" id="customForm" v-bind:form-config=this.customForm > <!-- Iterates over uploadFieldConfigs; fieldConfig will be the child object, key will be the key under which it is stored as part of uploadFieldConfigs --> <!-- '#' is a shorthand for v-slot: (referencing the slot name dynamically is easier with the shorthand) https://vuejs.org/guide/components/slots.html#dynamic-slot-names --> <!-- '=data' passes in the field data, and we pass name and field in EssentialSmartForm, cf. https://vuejs.org/api/built-in-directives.html#v-slot --> <template v-for="(fieldConfig, key) in uploadFieldConfigs" #[fieldConfig.slotName]="data"> <p :key="key + '_upload_debug1'" v-html="'Upload | Key: |' + key + '| Data: |' + JSON.stringify(data) + '|'"></p> </template> <template v-for="(fieldConfig, key) in searchFieldConfigs" #[fieldConfig.slotName]="slotProps"> <p :key="key + '_upload_debug2'" v-html="'Search | Key: |' + key + '| Data: |' + JSON.stringify(slotProps) + '|'"></p> </template> </GenericFormComponentWithSlots> </div> </template> <style lang="less" scoped> </style> src/__tests__/the-user-form.json { "id": "myForm", "version": 1, "headline": "My form", "sections": [ { "id": "BaseInfo", "title": "Some Hints", "allowMultiple": false, "fields": [ { "id": "searchResultSlot1", "type": "Slot", "label": "Search result slot 1", "keyLabel": "labelName", "isReadOnly": false }, { "id": "searchResultSlot2", "type": "Slot", "label": "Search result slot 2", "keyLabel": "labelName", "isReadOnly": false }, { "id": "uploadResultSlot1", "type": "Slot", "label": "Upload Result Slot 1", "upload": true, "required": true }, { "id": "uploadResultSlot2", "type": "Slot", "label": "Upload Result Slot 2", "upload": true, "required": true } ], "defaultValues": { }, "pages": [{}] } ] } vite.config.js import vue from '@vitejs/plugin-vue2' import { fileURLToPath, URL } from "node:url"; export default { plugins: [ vue() ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } } package.json { "name": "My-App", "version": "1.0.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:unit": "vitest --environment jsdom --root src/", "coverage": "vitest --coverage --environment jsdom --root src/" }, "dependencies": { "isomorphic-fetch": "^3.0.0", "register-service-worker": "^1.7.2", "vue": "^2.7.16", "vue-dompurify-html": "4.1", "vue-router": "^3.5.3" }, "devDependencies": { "@vitejs/plugin-vue2": "^2.3.1", "@vitest/coverage-c8": "^0.29.2", "@vue/cli-plugin-eslint": "^5.0.8", "@vue/cli-plugin-pwa": "^5.0.4", "@vue/cli-plugin-router": "^5.0.4", "@vue/cli-service": "^5.0.8", "@vue/eslint-config-standard": "^6.1.0", "@vue/test-utils": "^1.3.6", "axios": "^1.6.5", "eslint": "^7.32.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^5.2.0", "eslint-plugin-vue": "^7.20.0", "jsdom": "^20.0.3", "keycloak-js": "^23.0.7", "less": "^4.1.2", "less-loader": "^10.2.0", "lodash": "^4.17.21", "msw": "^1.1.0", "portal-vue": "^2.1.7", "terser": "^5.30.4", "vitest": "^0.29.8", "vue-axios": "^3.4.1", "vue-i18n": "^8.27.1", "vue-sweetalert2": "^5.0.5", "vue-template-compiler": "^2.7.16", "vue-virtual-scroller": "^1.0.10", "workbox-webpack-plugin": "6.5.3" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "@vue/standard" ], "parserOptions": { "ecmaVersion": 2021 }, "rules": { "indent": [ "error", 4 ] } }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] } 编辑:如果我在填充槽的同一组件中生成槽,问题仍然存在。如果我只有两次迭代并且不使用任何插槽,它就会消失。 这似乎是一个很奇怪的错误,这似乎是由两个 fieldConfig 的迭代器 v-for 的同名引起的。在我看来,无论出于何种原因,变量都是共享的。最简单的解决方法是为每个 v-for 循环使用不同的迭代器变量名称,例如: <template v-for="(fieldConfig, key) in uploadFieldConfigs" #[fieldConfig.slotName]="data"> <p :key="key + '_upload_debug1'" v-html="'Upload | Key: |' + key + '| Data: |' + JSON.stringify(data) + '|'"></p> </template> <template v-for="(fieldConfig2, key) in searchFieldConfigs" #[fieldConfig2.slotName]="slotProps"> <p :key="key + '_upload_debug2'" v-html="'Search | Key: |' + key + '| Data: |' + JSON.stringify(slotProps) + '|'"></p> </template> 注意我如何使用 fieldConfig2 作为 searchFieldConfigs 上的迭代器。

回答 1 投票 0

如何在 vue-i18n 中显示带小数和不带小数的货币

通过以下配置,我可以输出带有货币的金额 const numberFormats = { “en-GB”:{ 货币: { 样式:'货币',货币:'GBP' } }, ...

回答 1 投票 0

Vue 错误:需要布尔值,但收到 True/False 字符串

我尝试仅在值为 true 时渲染组件,但是我收到以下错误: Vue warn]:无效的道具:道具“可选择”的类型检查失败。预期布尔值...

回答 3 投票 0

Wowjs 和 Animate.css 无法与 VUEJS 一起使用

我试图使用 wowjs 或 animate.css 包含一些动画,但它似乎不起作用。 这是我采取的步骤。 第一: npm 安装 wowjs 在 main.js 中 导入“animate.css”; 在页面...

回答 2 投票 0

Vuejs 2 多级下拉菜单

我正在尝试创建一个多级下拉菜单,但它对我不起作用,不知道为什么。我的控制台上没有错误。我正在使用 Vuejs 2.version。 这是我的下拉菜单; 我正在尝试创建一个多级下拉菜单,但它对我不起作用,不知道为什么。我的控制台上没有错误。我正在使用 Vuejs 2.version。 这是我的下拉菜单; <b-dropdown id="benutzer-dropdown" text="Benutzer" class="navbar-item"> <b-dropdown-item href="/main/de/verwaltung/users/">Benutzer verwalten</b-dropdown-item> <b-dropdown-item href="/main/de/verwaltung/roles/">Rollen verwalten</b-dropdown-item> <b-dropdown-item href="/main/de/verwaltung/permissions/">Berechtigungen verwalten</b-dropdown-item> <b-dropdown id="submenu" right> <b-dropdown-item @click="handleSubMenuClick">1</b-dropdown-item> <b-dropdown-item @click="handleSubMenuClick">2</b-dropdown-item> <b-dropdown-item @click="handleSubMenuClick">3</b-dropdown-item> </b-dropdown> </b-dropdown> 和js函数(我只是想测试一下,但是我的控制台里什么也没有) handleSubMenuClick(){ console.log("clicked!!"); }, 看起来您正在尝试使用 b-dropdown 组件在 Vue.js 中实现多级下拉菜单,我认为它是 Bootstrap-Vue 或类似库的一部分。但是,从您的代码片段来看,子菜单下拉列表似乎未正确配置为充当嵌套下拉列表。父下拉列表可以包含嵌套下拉列表,但嵌套下拉列表本身需要正确的设置才能将其内容显示为下拉列表。 以下是如何修改代码以确保嵌套下拉菜单正确运行的方法: 确保正确使用嵌套下拉列表的作用域插槽:在 Bootstrap-Vue 中,如果您使用嵌套下拉列表,通常需要使用作用域插槽来正确渲染嵌套下拉列表及其项目的切换。 如有必要,请使用 b-nav-item-dropdown:如果您位于导航栏上下文中,b-nav-item-dropdown 可能比 b-dropdown 更合适。 确保正确处理点击事件:Vue.js 需要正确定义方法并正确绑定到点击事件。 贝努茨管理 罗伦管理 管理责任 <b-nav-item-dropdown text="Submenu" right> <b-dropdown-item @click="handleSubMenuClick">1</b-dropdown-item> <b-dropdown-item @click="handleSubMenuClick">2</b-dropdown-item> <b-dropdown-item @click="handleSubMenuClick">3</b-dropdown-item> </b-nav-item-dropdown> </b-nav-item-dropdown> 导出默认值{ 方法: { 处理子菜单点击() { console.log("点击了!!"); } } } 主要变化: b-nav-item-dropdown:这用于更好地集成在导航栏中。 嵌套下拉菜单:封装在另一个 b-nav-item-dropdown 中以获得正确的行为。 Vue 方法:确保您的方法在 Vue 实例中正确定义。 最后,如果您正在使用 Bootstrap-Vue,请确保您的 Vue 项目正确导入和配置它。您可能还想检查您的项目设置是否正确包含 Bootstrap CSS 和 JS,以获得正确的下拉功能。

回答 1 投票 0

如何计算数组子级的深度 - Vue.js

我希望计算深度方法能够正确计算深度,而是反向计算,将第一个元素分配为深度 2,第二个元素分配为深度 1,第三个元素分配为

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.