vue-component 相关问题

Vue js 中的免费文本编辑器

在vue js中尝试过（vue-2）文本编辑器。它在本地工作，当我尝试在 Prod Env 中移动相同的代码时，已使用以下命令 npmaudit 执行了漏洞检查。 vue-2 编辑器...

VueJS 读取 Dom 属性

我想获取按钮点击事件的href属性。 获取数据 我想获取按钮点击事件的href属性。 <a v-on:click.prevent="func($event)" href="/user/all/2"> <i class="fa fa-edit"></i> <span>Get Data</span> </a> 主要.JS文件 new Vue({ el: 'body', methods: { func: function (event) { element = event.target; console.log(element); // Output : Select span|i|a element href = element.getAttribute('href'); }, } }); 目标事件未选择元素。它选择单击的元素。 您想要event.currentTarget，而不是event.target。这是情况的一个小提琴：https://jsfiddle.net/crswll/553jtefh/ 这就是“Vue 方式”。 Vue 是关于可重用组件的。所以，首先创建组件： <script src="https://unpkg.com/vue"></script> <div id="app"> <my-comp></my-comp> </div> <script> // register component Vue.component('my-comp', { template: '<div>Just some text</div>' }) // create instance new Vue({ el: '#app' }) </script> 现在添加自定义属性并读取其值： <script src="https://unpkg.com/vue"></script> <div id="app"> <my-comp my-attr="Any value"></my-comp> </div> <script> Vue.component('my-comp', { template: '<div>aaa</div>', created: function () { console.log(this.$attrs['my-attr']) // And here is - in $attrs object } }) new Vue({ el: '#app' }) </script> var app = { func: function(event) { console.log(event.currentTarget.id); //this will get whole html tag console.log(event.currentTarget.href); //this will show href value } } // Apps var app_vue = new Vue({ data: app, }).$mount("#app_vue"); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app_vue" v-cloak class="card"> <a v-on:click.prevent="func" href="/user/all/2"> <i class="fa fa-edit"></i> <span>Get Data</span> </a> </div>

如何在Vuejs中显示来自Quill的值

我在 Vue3 应用程序中使用 Quill 文本编辑器。所以我在管理面板中有我的文本编辑器，并且我将结果存储在 api 中。例如，它是 api 视图： { 描述：“< 我在 Vue3 应用程序中使用 Quill 文本编辑器。所以我在管理面板中有我的文本编辑器，并且我将结果存储在 api 中。例如，它是 api 视图： { description: "<p><strong><em>Description</em></strong></p>" } 所以描述是来自羽毛笔文本编辑器的值。所以我想在前端显示如下：<div>{{ product.attributes.description }}</div>但结果就像你在图片中看到的那样。 那么我怎样才能以正确的方式显示这个粗体和斜体呢？ 您可以使用 v-html 指令： const app = Vue.createApp({ el: "#demo", data() { return { description: "<p><strong><em>Description</em></strong></p>" } } }) app.mount('#demo') <script src="https://unpkg.com/vue@3"></script> <div id="demo"> <div v-html="description"></div> </div> 使用 v-HTML，并且不要忘记将 ql-editor 类添加到元素中，以便正确显示您的内容。 <div class="preview ql-editor" v-html="description"></div> 如果您只显示文本，这很有效，假设您想使用 v-html 显示带有图像的内容，则不会响应地显示内容。这是我使用 Quil 编辑器 readOnly=true 解决它的方法。 <template> <v-container fluid> <div id="app"> <div id="app"> <div class="editor"> <quill-editor class="editor" v-model:content="description" theme="snow" toolbar="full" ></quill-editor> </div> </div> </div> <div class="preview"> <quill-editor v-model:content="description" :options="options"/> </div> </v-container> </template> <script> export default { data() { return { description:'', options: { debug: 'info', modules: { toolbar: null }, readOnly: true, theme: 'bubble' } } }, } </script>

Vue Bootstrap - 工具提示不适用于动态渲染的 HTML

我有一个列表组，其列表项是通过 API 调用呈现的。 例如， { “菜单ID”：“1”， "名称": "帮助", ...

在 onMounted 中使用路由器时应用程序没有响应

我想根据组件中可组合项的状态重定向页面。但由于某种原因，在 onMounted 中添加路由器会挂起应用程序。 这是我的组件代码： const { 注释、错误、加载...

如何在 Vue 2.7 Composition API 中将 v-model 与自定义组件一起使用？

我正在使用 Vue 2.7 和 Composition API 构建自定义输入组件。到目前为止，我的组件已达到以下状态： <... 我正在使用 Vue 2.7 和 Composition API 构建自定义输入组件。到目前为止，我的组件已达到以下状态： <template> <div class="ui-field"> <label :for="id">{{ label }}{{ required ? '*' : '' }}</label> <input :aria-errormessage="errorDescriptionId()" :aria-invalid="!!error ? 'true' : 'false'" :autocomplete="autocomplete" class="ui-input" :data-acting="is_acting" :disabled="disabled" :id="id" :required="required" :type="type" :value="modelValue" @input="emitChange" /> <p :id="errorDescriptionId()" v-if="error">{{ error }}</p> </div> </template> <script lang="ts" setup> type UIInput = { autocomplete?: 'on' | 'off' | undefined disabled?: boolean | undefined error?: string | undefined id?: string | undefined is_acting?: boolean | undefined label?: string | undefined required?: boolean | undefined type?: 'text' | 'number' | undefined modelValue?: any } const props = defineProps<UIInput>() const emit = defineEmits(['update:modelValue']) function emitChange(event: Event): void { if (event?.target?.value) { emit('update:modelValue', event.target.value) } } function errorDescriptionId(): string | undefined { if (props.error === undefined) { return undefined } return `${!!props.id ? props.id : generateRandomId()}-error` } function generateRandomId(): string { const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz' let random_string = '' for (let i = 0; i < 4; i++) { const index = Math.floor(Math.random() * letters.length) random_string += letters.charAt(index) } return random_string } </script> 如您所见，组件应该能够在父组件上接收 v-model，如下所示： <UIInput autocomplete="off" id="complement" label="Complemento" type="text" v-model="form.address.complement" /> form.address.complement是一个响应式对象，它的值应该传递到我的组件的输入元素，并随着我更改输入上的文本而更改。所有这些都是组件应该的行为方式，但实际上，在检查Vue DevTools时，我的UIInput有一个modelValue: undefined，即使form.address.complement已经以字符串值开头，并且还有一个$attrs: value: [value of form.address.complement]。就像双向绑定没有正确连接所有东西一样。 我不知道我做错了什么，所以如果有人可以提供帮助，我很感激。 我找到了解决这个问题的方法。唯一需要改变的是 emit，它需要发出一个名为“input”的事件 emit('input', 'event.target.value') 而且，在 type UIInput 中，我不需要 modelValue，正如 @Estus Flask 对我的问题的评论，但实际上，一个 value，它对我的 v 模型有价值。

如何接收发出的事件

我正在使用 vue3 和选项 api 如下代码所示，在toggle-1.vue中，我发出 onClsDigitizePolygonInteractionInstanceInit 事件。我想知道如何监听或接收发出的

Vue Tailwind Datapicker -> 如何更改所选日期的舍入/特定颜色？

我想将所选数据的舍入更改为更方形。另外，我如何使用 tailwind.config 文件中的指定颜色来与此组件兼容？因为现在 vtd-primary co...

为什么 Vue 3 不重新渲染 <img>，即使它重新渲染组件中的其他所有内容？

我正在开发一个 Vue 项目，其中多个链接卡 () 堆叠在一个“甲板”() 内。这些的设置是mo...

Vue 3 – <Transition>渲染无法动画的非元素根节点

App.vue 有一个过渡标签来淡出和淡入页面。 <

如何显示来自 Vue.js 中 FastAPI 端点的多个数据集的垂直条形图？

我想使用 Vue.js 框架显示多个数据集。数据集来自 FastAPI 服务器后端，包含模拟股票数据。 从 fastapi 导入 FastAPI 来自 fastapi.middle...

将CSS添加到Vuetify v-data-table

我想向我的 v-data-table 标题和单元格行添加/修改 CSS，我搜索了官方文档并在 google 上搜索，但没有一个解决方案有效。 根据我尝试的不同解决方案...

Vue 3 和 Tailwind，无法制作动画

我有一个基本的导航标题，我试图使其具有反应性，当我单击“显示菜单”按钮时，我没有看到动画，但是当我关闭菜单时，我得到了一个动画。我仍然有点新手...

Vue 命名槽在包装时不起作用

我有一个响应式菜单组件，我想在我的模板标记中使用命名插槽： 我有一个响应式菜单组件，我想在我的模板标记中使用命名插槽： <template> <div class="responsive-menu"> <div class="menu-header"> <slot name="header"></slot> </div> </div> </template> 每当我尝试像这样命名的插槽时，它都工作得很好： <responsive-menu> <h3 slot="header">Responsive menu header</h3> </responsive-menu> 但是，一旦我用类包装它，就什么也没有出现了。 <responsive-menu> <div class="container"> <h3 slot="header">Responsive menu header</h3> </div> </responsive-menu> 这是怎么回事？我不应该能够包装指定的组件吗？我的命名插槽需要是我的 Vue 组件的直接子级，这看起来是怎样的？ 它不起作用，因为您的“包装槽”不是响应式菜单标记的直接子代。 尝试类似的事情： <responsive-menu> <div class="container" slot="header"> <h3>Responsive menu header</h3> </div> </responsive-menu> jsfiddle 它适用于 Vue >= 2.6。只需升级 vue 和 vue-template-compiler 即可。 您可以像v-slot一样使用它，因为slot语法已被弃用，如此处： <responsive-menu> <div class="container"> <h3 v-slot:header>Responsive menu header</h3> </div> </responsive-menu> 或简写： <responsive-menu> <div class="container"> <h3 #header>Responsive menu header</h3> </div> </responsive-menu>

VueJs 3：应该全局加载什么样的组件才能提高性能

使用vue3，我们可以全局实现组件，这意味着如果不使用它们，它们也会被实现。 我的想法是在全球范围内实现布局组件（网格，行，列），但它们不是......

如何在Storybook中注册全局Vue组件？

有没有办法在 Storybook 中注册全局 Vue 组件，以便与 Vue-CLI 中全局注册的 Vue 组件兼容？

将值从 vue-multiselect.js 组件发送到主视图

我想将数据从 MultiSelectFilter 组件传递到 Home.vue 视图。 当我在视图中使用 console.log 时，我没有得到任何结果。 我查看了有关使用 @input 事件的文档（h...

使用VueJS自动调整Textarea大小的问题

我试图让文本区域在文本值更改时自动调整其高度： 我用的是手表...

类型错误：无法读取未定义的属性“v4”

我在 Vue.js 中收到此错误： vue.esm.js?efeb:628 [Vue warn]: v-on 处理程序中出现错误：“TypeError: 无法读取属性 'v4' 未定义的” 在发现 ---> 在 src/

Snackbar Vuetify - 超时后覆盖方法

我想问你如何定义一个在超时后执行的方法？超时后我想执行 $emit 事件，但我不知道该怎么做...... 我想问你如何定义一个在timeout之后执行的方法？之后timeout我想执行$emit事件，但我不知道该怎么做... <v-snackbar v-model="snackbar" :color="primary" :timeout="5000" > {{ text }} <v-btn dark flat @click="snackbar = false" > Close </v-btn> </v-snackbar> https://vuetifyjs.com/en/components/snackbars 根据文档，该属性没有附加任何事件，但我将提供一个响应您的用例的解决方案，将 timeout 属性添加到您的数据对象，如下所示： data() { return { snackbar:false, timeout:6000, .... } } 将事件处理程序添加到您的按钮单击： <v-btn block color="primary" dark @click="showSnackbar"> Show Snackbar </v-btn> 在您的方法中添加 showSnackbar 方法 methods: { showSnackbar() { this.snackbar=true; setTimeout(() => { this.$emit("yourEvent"); },this.timeout); } } 我用这支笔模拟了你的情况 您还可以使用观察者。观察 snackbar === false，然后执行该函数。 在超时后执行某些操作的最佳方法是使用 v-snackbar 组件提供的本机 events。在 Vuetify 2 中是 @input，在 Vuetify3 中是 @update:modelValue。这是一个例子： <template> <v-snackbar v-model="message.status" :color="message.type" :bottom="true" :right="true" :timeout="timeout" @input="hide()"> {{ message.text }} <template v-slot:action="{ attrs }"> <v-btn class="mr-0" v-bind="attrs" text icon @click="hide"> <v-icon color="white">mdi-close</v-icon> </v-btn> </template> </v-snackbar> </template> <script> import { mapGetters } from 'vuex' export default { name: 'Message', data() { return { timeout: 6000 } }, computed: { ...mapGetters(['message']) }, methods: { hide() { this.$store.commit('hideMessage') } } } </script> 所以，这里的hide()方法会在点击close按钮或者超时时执行。