vue-component 相关问题

onMounted(()=>{ const scripts = [ "https://pay.google.com/gp/p/js/pay.js", ]; // Append the pay.js script to the <head> tag scripts.forEach(script => { let tag = document.createElement("script"); tag.setAttribute("src", script); tag.setAttribute("async", true); document.head.appendChild(tag); }); //Check if Google Pay exists function isGooglePayReady(){ if('google' in window && Object.keys(window.google).length) { loadGooglePay() } } // Have to currently use a setTimeout to wait for script to load setTimeout(()=> isGooglePayReady(), 500);

javascript vue.js vuejs3 vue-component

回答 1 投票 0

为什么儿童节点不是在树上触发发射事件？

组件递归生成树。看起来像这样： ... I有一个VUE组件，该组件递归地用<CustomTreeNode>组件递归生成树。看起来像这样： <template> <div> <div> <span @click="nodeClicked($event, localValue)"> {{ localValue.name }} </span> </div> <div v-if="open && value.children.length > 0">  <CustomTreeNode v-for="citem in localValue.children" :key="citem.id" :value="citem" :selected="citem.selected" @node-clicked="nodeClicked($event, citem)" /> </div> </div> </template> treeNode组件上的处理程序发出了事件，该事件由托管树的页面转弯处理。 const nodeClicked = (e: Event, node: ITreeNode) => { console.log(`KTREENODE: nodeClicked() called with item ${node.name}`) // <------- always invoked emit('node-clicked', [e, node]) // <<-------- only invoked for root nodes, not children console.log(` KETREENODE: after emit() called after [${node.name}] node clicked`) } 树渲染正好，当我单击顶级节点时，事件将传递给到主机，我可以管理。在父母node-clicked组件及其主机中的<CustomTree>事件的处理程序中。但是，当我单击子项目时，调用了nodeClicked事件处理程序方法，并打印两个控制台。但是emit()没有发生。任何想法为什么？注：@node-clicked="nodeClicked($event, citem)"似乎没有太大的不同，只是导致处理程序被称为两次。在play.vuejs上复制了问题当您递归调用此customtreenode.vue组件时，您应该在层次结构下传播事件： // CustomTreeNode.vue <script setup lang="ts"> // other code here... const childNodeClicked = (args: [Event, ICustomTreeNode]) => { emit('node-clicked', [args[0], args[1]]) } </script> <template> // other code here... <CustomTreeNode // other code here... @node-clicked="childNodeClicked($event)" /> </template> 地，当您将参数作为数组传递时： emit('event-name', ['args1', 'args2']) 活动处理程序还以数组的形式接收参数： const eventHandler = (args: [string, string]) => {};

typescript vuejs3 vue-component

回答 1 投票 0

如何在剩下字段时隐藏文本字段浮动建议，但如果单击建议？

javascript vue.js vue-component

回答 1 投票 0

为什么要在VUE3

我想看看使用此方法的必要性是什么，鉴于我可以访问树数据并通过使用下面的类并在任何组件中调用UsetreeIndex函数查看更改。

vue.js vuejs3 vue-component

回答 1 投票 0

我创建了.NET Core Web应用程序，在此我正在使用VUEJS.

用户可以打印表格中的弹出内容，因此一切正常工作

vue.js vuejs3 vue-component vuetify.js vuetifyjs3

回答 0 投票 0

如何将一些NUXT代码转换为某些vue？

导出默认{ 成分： { 特色产品 }，，异步Asyncdata（{$ axios}）{ 尝试 { 让响应= ... </desc> <question vote="2">我如何将此NUXT脚本转换为Vue兼容的脚本？ <p><code><script> export default { components: { FeaturedProduct }, async asyncData({ $axios }) { try { let response = await $axios.$get( 'http://localhost:5000/api/products' ) console.log(response) return { products: response.products } } catch (error) {} } } </script> </code></p> <pre>我可以在Vue中浏览一下吗？如果我删除了</pre><code>$</code><p>，它会给我一个错误说<pre> </pre> Axios未定义</p> <blockquote> <p> </p> </blockquote>这将是VUE中的语法（假设您已经为VUE安装了Axios）</question> <answer tick="true" vote="2"><code><script> export default { async created() { try { let response = await this.axios( 'http://localhost:5000/api/products' ) console.log(response) this.products = response.data.products } catch (error) {} } } </script> </code><p> </p> <pre></pre>

javascript vue.js vuejs2 vue-component nuxt.js

回答 0 投票 0

vue组件在第2页上呈现两次

在我的主页组件中，我正在导入Asidecta组件： <template> <TheHero /> <TheServices /> <TheBundles /> <AsideCTA title="Kontakta oss!" url="#"> <p> Osäker på vad du behöver? Don't worry, vi hjälper dig! </p> </AsideCTA> <TheProcess /> <ThePitch /> <TheReferences /> <AsideHook /> </template> 在我的asidecta组件中，我正在导入tecta组件： <script setup> import TheCTA from './TheCTA.vue'; const props = defineProps(['title', 'url']); </script> <template> <aside class="aside-cta"> <slot></slot> <TheCTA v-if="props.title" :url="props.url">{{ props.title }}</TheCTA> </aside> </template> thecta： <script setup> const props = defineProps(['url']); </script> <template> <a :href="props.url" class="cta"><slot></slot></a> </template> 问题是该组件与另一个空的迭代一起呈现，我不知道为什么。我试图使组件有条件，但它仍然在页面上使用一个空的v-if-f-ifbefore. 没有条件：该组件在页面上呈现两次条件： <template> <AsideCTA v-if="asideCTATitle" :title="asideCTATitle" url="#"> <p> Osäker på vad du behöver? Don't worry, vi hjälper dig! </p> </AsideCTA> </template> <script setup> [...] import { ref } from 'vue'; const asideCTATitle = ref(null); </script> renders一个空元素有人知道这是怎么回事？问题可以在Vue DevTools中可见，渲染的组件包含： HomeView 这意味着它不仅是问题所显示的DOM中的一个错误，而且是<AsideCTA ...>...</AsideCTA> <AsideCTA/> 的实际行为。如果模板中只有一个HomeView，则在正常情况下，这是不可能的。问题是由错字引起的：AsideCTA 这将导致第二次渲染而不是import AsideCTA from '../components/AsideCTA.vue'; ... import TheProcess from '../components/AsideCTA.vue'; 。

vue.js dom vue-component rendering

回答 1 投票 0

如何访问vuejs

我想在方法对象中访问函数中的模板参考。当前，访问裁判时，它会抛出不确定的。我的代码下面：我想在方法对象中访问函数中的模板参考。目前，访问ref. 我的代码下面： <template> <ul ref="lvl1_target" style="width: 440px" class="lvl1_target milestone_asset_data"> <li :style="{'width': getMileStonePercent(4,'lvl1_target')}" class="hybse_data"> <span></span> <i></i> <small>$4M</small> </li> </ul> </template> 脚本标签中的代码如下： export default { methods: { getMileStonePercent(num, secWrp) { let ele = this.$refs[secWrp] return ele.offsetWidth + '%' }, }, created() {}, } kindly，通过访问我功能中的模板参考来提供解决方案以获取宽度。预先感谢您需要在要目标的元素中添加一个ref属性。我不确定您到底要做什么，这是一个通用的示例：<template> <div ref="myElement"></div> </template> export default { methods: { setText() { this.$refs.myElement.innerHTML = "Hello world" }, }, } vueref文档您可以尝试 export default { methods: { this.$next(tick() => { setText() { this.$refs.myElement.innerHTML = "Hello world" } }) }}

vue.js reference vuejs2 vue-component ref

回答 2 投票 0

为什么在vue.js中的翻转动画中简短显示了第三张图像？我正在从事一个vue.js组件，在其中我创建一个使用每隔几秒钟更改的图像的翻转动画。目的是随机更改图像，但是过渡期间存在问题。

我想要什么：

css vue.js animation vue-component

回答 0 投票 0

如何使用类样式的儿童组件的根和非根部元素在VUE 3？

的说法，这是Vue团队的故意功能。在VUE 2中，即使是

vue.js vuejs3 vue-component

回答 0 投票 0

添加了message，但未显示 priblevue toasteventbus的ToastMessages被添加到DOM，但未显示。有人知道为什么吗？基于此答案，我在页面中有以下内容。

我有以下内容。 <!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <script type="text/javascript" src="https://unpkg.com/vue@3/dist/vue.global.prod.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script type="text/javascript" src="https://unpkg.com/primevue/umd/primevue.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script type="text/javascript" src="https://unpkg.com/@primevue/themes/umd/aura.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <div id="test-toastbutton"></div> <script type="module"> import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' const app = createApp({ setup() { const addToast = () => { PrimeVue.ToastEventBus.emit('add', { severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 }) } return { addToast }; }, template: '<Toast /><button @click="addToast">Adding toast</button>' }) app.use(PrimeVue.Config, { theme: { preset: PrimeVue.Themes.Aura } }) app.component('Toast', PrimeVue.Toast) app.mount('#test-toastbutton') </script> </body> </html> 在控制台我看到警告： [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. at <Toast> at <App> 我期望展示敬酒。相反，我只看到它们添加到DOM： <body> <div id="test-toastbutton" data-v-app=""> <portal> <div class="p-toast p-component p-toast-top-right" data-pc-name="toast" pc1="" data-pc-section="root" style="position: fixed; top: 20px; right: 20px;"> <div> <toastmessage message="[object Object]" templates="[object Object]"></toastmessage> <toastmessage message="[object Object]" templates="[object Object]"></toastmessage> <toastmessage message="[object Object]" templates="[object Object]"></toastmessage> ... 您两次进口Vue，这总是一个坏主意。您唯一需要更改的是： ... <script type="module"> // no more import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' const { createApp } = Vue; ... 您已经有一个全局Vue对象，因此您应该使用它的createApp。如果您不喜欢破坏性的语法，也可以选择Vue.createApp

vuejs3 vue-component primevue

回答 1 投票 0

Primevue-如何使用重置发射以清除形式？

https：//primevue.org/forms/

vue.js vuejs3 vue-component vue-composition-api primevue

回答 1 投票 0

我正在从事一个小型在线商店的项目。我正在使用PINIA将我要获取的数据作为产品和其他物品的数组。现在，我不知道为什么，但是国家不会跟上。我正在使用路由和组件具有不同的页面。在家中，您可以选择产品并查看其页面，然后可以将产品添加到购物车中。访问购物车页面，它显示了产品。如果您在上一页上使用，则购物车仍然保留产品。相反，如果您返回2页（家），则购物车列表变为空。浏览家庭和购物车时并非如此。它仅在访问产品页面或返回到第一页时才发生。我尝试在线搜索解决方案，但什么也没有发现。这是回购，如果您可以检查...

vue.js vue-component pinia global-state

回答 2 投票 0

反应性问题：儿童组件中的插槽

我有以下设置：最初安装组件时，ControlValue会正确传递以控制。此后发生的事情是，当单击控制中的一个无线电按钮时，该值将更新，输入事件被派发并在主VUE组件中进行控制值，但它不会滴入模态和控制组件（因为模态不重新渲染）。当我关闭模态时，它重新呈现，我可以看到值向下滴落到模态和控制。 eDit进行更多测试。实际上，它与控件根本无关。一个简单的输入是一样的。 <div id="app"> {{ 'It updates here: ' + controlValue }} <modal v-bind:is-open="showModal" v-on:close-modal="showModal = false" > <template v-slot:body> {{ 'Doesn\'t update here ' + controlValue }} <input name="radio" type="radio" value="1" v-model="controlValue" /> <input name="radio" type="radio" value="2" v-model="controlValue" /> <input name="radio" type="radio" value="3" v-model="controlValue" /> <input name="radio" type="radio" value="4" v-model="controlValue" /> </template> </modal> </div> 我用完了如何解决此问题的想法。接下来我可以尝试什么？，正如我所怀疑的那样，问题是我的插槽范围。 I必须研究Https：//v2.vuejs.org/v2/guide/components-slots.html#scoped-slots. I更改了我的模态组件，以在插槽上具有插槽。 <slot name="body" v-bind:slotProps="slotProps"></slot> 然后这样使用： <div id="app"> {{ 'It updates here: ' + controlValue }} <modal v-bind:is-open="showModal" v-bind:slot-props="controlValue" v-on:close-modal="showModal = false" > <template v-slot:body> {{ 'Doesn\'t update here ' + controlValue }} <control name="tag-error-control" type="radio" v-bind:options="options" v-model="controlValue" /> </template> </modal> </div>

javascript vue.js vuejs2 vue-component

回答 1 投票 0

vue-component 相关问题

最新问题