vue-component 相关问题

我想根据给定的参数加载 vue 组件的一些内容。下面是一些代码来说明：父组件.vue 我想根据给定的参数加载 vue 组件的一些内容。下面是一些代码来说明： ParentComponent.vue <Suspense> <div class="row g-0"> <div class="col-md-3"> <ChildComponent json-url="some/url/to/json/data" /> </div> <div class="col-md-3"> <ChildComponent json-url="some/url/to/json/data" /> </div> <div class="col-md-3"> <ChildComponent json-url="some/url/to/json/data" /> </div> <div class="col-md-3"> <ChildComponent json-url="some/url/to/json/data" /> </div> </div> <template #fallback> <p>Loading...</p> </template> ChildComponent.vue <template>  </template> <script setup> import { ref, onMounted} from 'vue'; defineProps({jsonUrl: { type: String, default: "" }}) const images = ref(null); const thumbnail = ref(null); const title = ref(""); const description = ref(""); onMounted(async () => { try { const response = await fetch(new URL(jsonUrl, import.meta.url).href); if (!response.ok) { throw new Error('Network response was not ok'); } var jsonData = await response.json(); images = jsonData["images"]; thumbnail = jsonData["thumbnail"]; title = jsonData["title"]; description = jsonData["description"]; console.log(thumbnail); } catch (error) { console.error('Error fetching the JSON file:', error); } }); </script> 问题在于jsonUrl在onMounted()回调期间似乎不可用。命名和一切都应该可以工作，因为如果我简单地将 <p>{{json}}</p> 放入模板中，它就会正确显示网址。我查了一下，好像该房产应该可以入住？例如，这篇文章的答案显示了几乎相同的方法（唯一的区别是打字稿的使用）。如何根据子组件中的 json 数据正确加载和初始化我的内容？使用 setup 时，必须定义 props 变量： const props = defineProps({jsonUrl: { type: String, default: "" }}) 然后使用 props.jsonUrl 访问该道具。这应该允许您访问 onMounted 内部的道具

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

回答 1 投票 0

如何将组件的内容添加到 Vue DOM 而不是包装器本身，就像 React JS 中的 React.Fragment

我正在尝试将我的代码重构为可读且简短的片段。因此，有时我需要创建一个愚蠢的组件，它只保存代码的重复部分。例如我想使用

reactjs vue.js vuejs3 vue-component react-fragment

回答 1 投票 0

如何删除vuetify自动完成组件默认图标

Vuetify 自动完成默认情况下有自定义的“向上”和“向下”箭头图标：如何更改此图标以搜索其他事件（活动或非活动）中的图标并获取此视图：这个例子创建了你...

vue.js vuejs2 frontend vue-component vuetify.js

回答 3 投票 0

在模板和代码中访问 vue3 深层对象时，它们的名称更短

如何绕过对象的长名称，例如，buttons.btnCancel.inactive？我尝试过使用 const {btnCancelInactive: inactive, btnCancelInactiveClass: inactiveClass,

vue.js vuejs3 vue-component

回答 1 投票 0

如何在Vue 3中挂载容器后才进行瞬移？

根据加载状态，有时的目标容器会晚于内容的挂载，导致Vue错误 [Vue 警告]：挂载上的传送目标无效...

vue.js vuejs3 vue-component vue-teleport vue-typescript

回答 1 投票 0

在 vue-search-select 中显示“+N 更多”

我有一个Vue组件，我正在使用MultiListSelect（vue-search-select）。我的问题是，如果我选择多个选项，我需要在框中显示 +N 更多。我有一个 Vue 组件，并且正在使用 MultiListSelect (vue-search-select)。我的问题是，如果我选择多个选项，我需要在框中显示 +N 更多内容。 <MultiListSelect :list="list" :multiple="multiple" :optionValue="optionValue" :optionText="optionText" :selectedItems="selectedItems" :class="customClass" @select="onSelect" /> 这些选项是开箱即用的。 <template> <div class="custom-multi-list-select"> <MultiListSelect :list="list" :multiple="multiple" :optionValue="optionValue" :optionText="optionText" :selectedItems="selectedItems" :class="customClass" @select="onSelect" /> <div class="selected-items-display"> <span v-for="(item, index) in displayedItems" :key="item.key" class="selected-item" > {{ item.name }} </span> <span v-if="remainingCount > 0" class="more-label"> +{{ remainingCount }} More </span> </div> </div> </template> 请安装 npm i vue-search-select在此处输入链接描述

vue.js vuejs3 vue-component

回答 1 投票 0

将 vee-validate 与 vue-datepicker 集成

我正在尝试使用 vee-validate 验证 vue-datepicker 的必填字段，如下所示：我正在尝试使用 vee-validate 验证必填字段的 vue-datepicker，如下所示： <Form @submit="handleEvent" :validation-schema="addEventSchema"> <VueDatePicker v-model="eventDate.startDate" text-input hide-input-icon :enable-time-picker="false" :clearable="false" model-type="yyyy-MM-dd" format="yyyy-MM-dd" > <template #dp-input="{ value }"> <Field name="startDate" type="text" v-slot="{ field, errors }"> <input type="text" name="startDate" v-bind="field" class="form-control form-control-lg form-control-outlined" :class="{ 'is-invalid': !!errors.length }" placeholder="End Time" :value="value" autocomplete="off" /> </Field> <label class="form-label-outlined" for="outlined-date-picker"> Start Date </label> <ErrorMessage class="invalid-feedback" name="startDate" /> </template> </VueDatePicker> <button type="submit">Submit</button> </Form> 在操作中，单击提交按钮后vee-validate确实有效并显示错误消息，但是当我向字段添加日期并且字段已填充时，验证无法修复错误，仍然显示错误并且无法提交表单。演示在这里如何将 vee-validate 与 vue-datepicker 集成？！您的代码在将父组件状态传递到插槽时存在反应性问题。定制文档正确显示了它。解决方案： <template #dp-input="{ value }"> <Field name="date" type="text" :modelValue="value" v-slot="{ field, errors }"> <input type="text" name="startDate" v-bind="field" class="form-control form-control-lg form-control-outlined" :class="{ 'is-invalid': !!errors.length }" placeholder="Start Date" :modelValue="field" autocomplete="off" /> </Field> <ErrorMessage class="invalid-feedback" name="date" /> </template> 首先，<Field name="date"监听<VueDatePicker模型状态。您没有更新 Field 的模型，因此 <Field name="date" :modelValue="value" 将解决第一个反应性问题。第二，内部input未正确绑定到模型。 <input :value="value" 应修改为 <input :modelValue="field" 演示也已更新。

javascript vue.js vuejs3 vue-component vee-validate

回答 1 投票 0

通过 JS/某些插件更新值时 vue js v-model 中的反应性

我目前在理解 VueJS 的 v-model 反应性如何工作方面遇到一些困难。我有一个选择插件，可以帮助我设置选择字段的样式，但它通过 cou 的 JS 更改选择字段值...

vue.js vuejs2 vue-component

回答 2 投票 0

在另一个道具的验证器中访问道具值

我想访问另一个 props 验证器中的 props 值：道具： { 类型： { 类型：字符串，默认值：“标准” }, 尺寸： { 类型：字符串，默认值：“正常”，验证器（值...

vue.js vuejs2 vue-component

回答 4 投票 0

如何在VueJS中重新挂载组件？

我有一个组件作为 DOM 渲染的一部分安装。该应用程序的骨架是我有一个作为 DOM 渲染的一部分安装的组件。该应用程序的骨架是 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <div id="app"> <my-component></my-component> <button>press this button to reload the component</button> </div> </body> </html> <my-component> 具有功能（它显示一些表单输入）并且 $emit 向父级提供数据。有办法重新安装它吗？目标是拥有组件内容和设置，就好像它刚刚第一次渲染一样（包括重置保持其状态的data()元素）。对此有一些解决方案，但它们都假设重写data()，我想避免这种情况。我的理解是，组件实际上是在渲染过程中在正确位置注入 dom 中的 HTML/CSS/JS 代码，所以我担心“重新安装”它的概念不存在 - 我只是想在之前确定一下采用 data() 重写方式。诀窍是改变密钥当 key 发生变化时，vue 会将其视为新组件，因此会卸载“旧”组件，并挂载“新”组件。参见示例，created()挂钩只会运行一次，因此如果您看到值发生变化，您就会看到一个全新的对象。示例： Vue.component('my-component', { template: `<div>{{ rand }}</div>`, data() { return { remount: true } }, created() { this.remount = !this.remount; // true▶false▶true▶false... } }); new Vue({ el: '#app', data: { componentKey:0 } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script> <div id="app"> <my-component :key="componentKey"></my-component> <button @click="componentKey=!componentKey">press this button to reload the component</button> </div> 在模板中，您将添加 v-if 指令： <template> <my-component v-if="renderComponent" /> </template> 在您的脚本中，您将添加使用 nextTick: 的方法 <script> export default { data() { return { renderComponent: true, }; }, methods: { forceRerender() { // Remove my-component from the DOM this.renderComponent = false; this.$nextTick(() => { // Add the component back in this.renderComponent = true; }); } } }; </script> 这就是这里发生的事情：最初 renderComponent 设置为 true，因此渲染 my-component 当我们调用 forceRerender 时，我们立即将 renderComponent 设置为 false 我们停止渲染 my-component，因为 v-if 指令现在计算为 false 在下一个刻度上 renderComponent 设置回 true 现在 v-if 指令的计算结果为 true，因此我们再次开始渲染 my-component 可能来源：https://medium.com/hackernoon/the- Correct-way-to-force-vue-to-re-render-a-component-bde2caae34ad，最初发布于https://michaelnthiessen。 com/force-re-render/ .

vue.js vuejs2 vue-component vuejs3

回答 2 投票 0

在vue中使用自定义模态，在另一个组件内两次仅渲染第一个组件数据

所以问题是我正在使用 Laravel Vue 应用程序，两者是不同的应用程序。我面临的问题是我在 VUE JS 中使用 bootstrap 创建了一个模态组件。一个...

vue.js vuejs3 vue-component bootstrap-modal

回答 1 投票 0

如何在多个组件中使用 Pinia 存储状态

我对 Vue 相当陌生，当将 Pinia 商店状态管理集成到我的项目中时，我无法决定最佳方法。我正在使用组合 API。我有一家 Pinia 商店，里面有...

vuejs3 vue-component vue-composition-api pinia vue-props

回答 1 投票 0

选择上的填充选项一开始显示为黑色，但更改选项卡后显示正常

我有一个像这样的选择组件选择要启动的新闻通讯我有一个像这样的选择组件 <template> <div class="newsletter-launcher"> <h2>Select a Newsletter to Launch</h2> <select v-model="selectedNewsletter" class="newsletter-select"> <option v-for="(newsletter, index) in newsletters" :key="index" :value="newsletter.name"> {{ newsletter.name }} ({{ newsletter.recipients }} recipients) </option> </select> <button @click="launchNewsletter" class="launch-button">Launch Newsletter</button> <p v-if="launchMessage" :class="['launch-message', { 'error-message': isError }]"> {{ launchMessage }} </p> </div> </template> 它的填充方式如下： setup() { const newsletterStore = useNewsletterStore() const { newsletters } = newsletterStore onMounted(async () => { await newsletterStore.fetchNewsletters() }) return { newsletters } } 新闻通讯变量也是通过 Pinia 商店填充的： export const useNewsletterStore = defineStore('newsletter', { state: (): NewsletterState => ({ newsletters: [] }), actions: { async fetchNewsletters() { try { const request_url = apiUrl + '/newsletters' const response = await axios.get<Newsletter[]>(apiUrl + '/newsletters', { headers: { Authorization: 'Bearer ' + apiToken } }) this.newsletters = response.data console.log(request_url) } catch (error) { console.error('Error fetching newsletters:', error) } } } }) 当我尝试选择一个选项时，它不显示任何选项，只显示黑色，但在我更改选项卡（顶部的蓝色文本）并再次返回启动时，它现在显示正确的选项之前点击后好吧，我明白了，但不完全确定原因，但这是由于我如何在商店中填充时事通讯。我替换了这一行： const { newsletters } = newsletterStore 对于 const newsletters = computed(() => newsletterStore.newsletters)

vue.js vuejs3 vue-component

回答 0 投票 0

Vue 3子组件在显示时引发点击事件

在 vue 3 compose api 中，我正在显示一个弹出组件，我想捕获用于关闭模式的点击。我的父组件中的代码在 vue 3 compose api 中，我正在显示一个弹出组件，我想捕获用于关闭模式的点击。我的父组件中的代码 <template> <button @click="toggleSettings" class="bg-gray-300 text-gray-700 px-4 py-2 rounded flex items-center"> <span>⚙️</span> </button> <ModalSettings :visible="showSettings" @onClose="toggleSettings"/> </template> <script setup lang="ts"> import { ref } from 'vue' const showSettings = ref(false) const toggleSettings = () => { showSettings.value = !showSettings.value } </script> 我的子组件的代码 <template> <div v-if="visible" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> <div ref="customDiv" @click.stop class="bg-white p-8 rounded-lg shadow-lg w-96"> <h2 class="text-xl font-bold mb-4"> Settings</h2> </div> </div> </template> <script setup lang="ts"> import { ref, onMounted, onUnmounted, nextTick, defineProps } from 'vue' const customDiv = ref<HTMLElement | null>(null) const props = defineProps({ visible: Boolean }) onMounted(() => { nextTick(() => { setTimeout(() => { document.addEventListener('click', handleClickOutside) }, 1000) }) }) onUnmounted(() => { document.removeEventListener("click", handleClickOutside) }) const handleClickOutside = (event: MouseEvent) => { if (customDiv.value && !customDiv.value.contains(event.target)) { console.log('close the popup') } } </script> 问题是每次我显示模态组件时，就好像立即在模态组件外部引发单击（我的超时黑客事件），因此它关闭了组件（在示例中，它只是写“关闭弹出窗口”）您知道会发生什么以及如何预防吗？您可以立即将组件与按钮一起安装，以便您的事件处理程序立即开始起作用。一个强力解决方案是向按钮添加 stop 修饰符： @click.stop="toggleSettings" 否则在 visible 更改上添加/删除侦听器：参见 Vue SFC Playground watch(() => props.visible, value => setTimeout(() => document[`${value ? 'add' : 'remove'}EventListener`]('click', handleClickOutside)));

javascript vuejs3 event-handling vue-component

回答 1 投票 0

Vuejs - 手风琴

我正在尝试使用 vuejs 创建一个手风琴。我在网上找到了一些例子，但我想要的不一样。出于 SEO 的目的，我使用“is”和“inline-template”，所以手风琴是静态的而不是......

javascript vue.js vue-component

回答 4 投票 0

vue-component 相关问题

最新问题