vuejs2 相关问题

我试图将父组件的道具传递给子组件，但子组件似乎无法正确获取道具。这是父组件：我试图将一个 prop 从父组件传递到子组件，但子组件似乎无法正确获取该 prop。这是父组件： <template> <div> <b-table striped hover :items="items" :fields="fields"> <template #cell(actions)="row"> <b-button size="sm" @click="openModal(row.item, row.index, $event.target)" class="mr-1" > Sua </b-button> <b-button size="sm" @click="row.toggleDetails" variant="danger"> Xoa </b-button> </template> <template #row-details="row"> <b-card> <ul> <li v-for="(value, key) in row.item" :key="key"> {{ key }}: {{ value }} </li> </ul> </b-card> </template> </b-table> <item-update-modal ref="itemUpdateModal" :id="modalAttributes.id" :title="modalAttributes.title" :propItem="propItem" /> </div> </template> <script> import ItemInfoModal from "@/components/item/ItemInfoModal.vue"; export default { name: "ItemList", components: { "item-update-modal": ItemInfoModal, }, props: { items: [], }, data() { return { showModal: false, // Initially, the modal is hidden fields: [ { key: "id", label: "Ma so", sortable: true, sortDirection: "desc", class: "text-center", }, { key: "name", label: "Ten san pham", sortable: true, sortDirection: "desc", }, { key: "description", label: "Mo ta", sortable: true, }, { key: "specification", label: "Quy cach", sortable: true, }, { key: "itemUnit", label: "Don vi", sortable: true, class: "text-center", }, { key: "actions", label: "Chi tiet" }, ], modalAttributes: { id: "itemUpdateModal", title: "Sua ban thanh pham", }, propItem: {}, }; }, methods: { openModal(item, index, button) { // Show the modal when the button is clicked this.propItem = JSON.parse(JSON.stringify(item)); this.$root.$emit( "bv::show::modal", this.modalAttributes.id, button ); }, resetInfoModal() { this.modalAttributes.propItem = {}; }, onFiltered(filteredItems) { // Trigger pagination to update the number of buttons/pages due to filtering this.totalRows = filteredItems.length; this.currentPage = 1; }, }, }; </script> 我的子组件是： <template> <div> <b-modal :id="id" v-model="showModal" centered :title="title" @ok="onSubmit" @show="openModal" > <b-form @reset="onReset"> <b-form-group id="input-group-item-name" label="Ten san pham" label-for="input-item-name" > <b-form-input id="input-item-name" v-model="item.name" type="text" required ></b-form-input> </b-form-group> <b-form-group id="input-group-item-description" label="Mo ta san pham" label-for="input-item-description" > <b-form-input id="input-item-description" v-model="item.description" type="text" required ></b-form-input> </b-form-group> <b-form-group id="input-group-item-unit" label="Don vi" label-for="item-unit" > <b-form-select id="item-unit" v-model="item.itemUnit" :options="itemUnitOptions" ></b-form-select> </b-form-group> <b-form-group id="input-group-item-specification" label="Quy cach" label-for="input-item-specification" > <b-form-textarea id="input-item-specification" v-model="item.specification" type="text" rows="4" required ></b-form-textarea> </b-form-group> </b-form> </b-modal> </div> </template> <script> import itemApi from "@/api/items"; export default { name: "ItemInfoModal", data() { return { showModal: false, item: { ...this.propItem }, itemUnitOptions: [ { value: "EA", text: "EA" }, { value: "GR", text: "GR" }, ], }; }, props: { id: { type: String, required: true, }, title: { type: String, required: true, }, propItem: { type: Object, required: false, default: () => {} }, }, methods: { openModal() { console.log(this.propItem); this.showModal = true; }, closeModal() { this.showModal = false; }, onSubmit(event) { event.preventDefault(); if (this.item.id) { console.log("updating"); itemApi.updateItem(this.item); } else { console.log("creating"); itemApi.createItem(this.item); } this.$router.go(0); }, onReset(event) { event.preventDefault(); console.log(this.item); // Reset the updatedItem object this.item = {}; }, }, }; </script> 这是用户界面：我试图用所选行项目的内容填充表单，但不知何故它不起作用。我尝试记录道具，但是第一次当我点击灰色按钮时，我得到了“{ob：观察者}”，然后我关闭了模态并再次打开了模态，这次我得到了我的“propItem”，但表格仍然没有按预期填写。更新：我将我的项目复制到此：https://codesandbox.io/p/sandbox/vue3-371lz2 请帮忙。非常感谢！解决方案是观察提供的项目从父组件到子组件的变化。通过将其添加到子项中，它应该可以工作： watch: { propItem: { handler(currentItem) { this.item = currentItem } } },

vuejs2

回答 1 投票 0

如何立即渲染数组的每个生成元素

我生成了 10000 个字符串。我将其添加到数组并以 html 形式呈现。问题是我需要在每个元素准备好时渲染它，而不是在所有元素都准备好时渲染。如何用vue2进行id 我生成了 10000 个字符串。我将其添加到数组并以 html 形式呈现。问题是我需要在每个元素准备好时渲染它，而不是在所有元素都准备好时渲染。如何用vue2进行id <div id="app"> <button @click="generateWords()">Generate words</button> <input v-model="search" type="text" /> <ul> <li v-for="word in words" :key="word.id"> {{ word }} </li> </ul> </div> <script> export default { name: 'App', data() { return { words: [], count:10000, }; }, methods: { generateWords() { let symbols = 'abcdefghijklmnopqrstuvwxyz1234567890'; let word = ''; for (let i = 0; count> i; i++) { while (word.length < 100) { word += symbols[Math.floor(Math.random() * symbols.length)]; } this.words.push(word); word = ''; } }, }, }; </script> 如果您像上面那样在主 UI 线程上同步生成单词，则不能。更新 UI 的线程与运行 JavaScript 代码的线程相同，在循环运行时不能运行其他任何线程。您可以将生成移动到工作线程，并在生成单词时将其post每个单词（或小批量单词）到您的 Vue 代码中。即使工作线程仍在生成其他单词，在主 UI 线程上运行的 Vue 代码也可以自由渲染该单词/那些单词。以下是基于现有循环的工作脚本的粗略示例： self.addEventListener("message", (e) => { if (e.data?.type === "start") { generateWords(); } }); function generateWords() { const count = 10000; let symbols = "abcdefghijklmnopqrstuvwxyz1234567890"; let word = ""; for (let i = 0; count > i; i++) { while (word.length < 100) { word += symbols[Math.floor(Math.random() * symbols.length)]; } self.postMessage({ type: "word", word }); word = ""; } } 然后是启动进程并监听结果的代码： const worker = new Worker("./worker.js"); worker.addEventListener("message", (e) => { if (e.data?.type === "word") { // ...use `e.data.word` here, it's the word that was received... } }); worker.postMessage({ type: "start" }); 您必须对其进行调整以适应您的 Vue 代码，但这是基本方法。

javascript arrays vue.js vuejs2

回答 1 投票 0

使用 Vue.js 从数组创建对象

我希望从数组创建一个对象，添加额外的键和默认值。下面的数组是我想要创建的。膳食选择：[ 鸡蛋：{ 已选：0 }, ...

javascript object vue.js vuejs2

回答 1 投票 0

vuerouter 的 HTML5 历史记录模式在生产环境中不起作用

在我的 Laravel 和 Vue.js V2 项目中，我实现了具有历史记录模式的 Vue Router v3。它在我的开发机器上完美运行。然而，一旦我切换到生产环境，我就会收到错误消息......

laravel apache .htaccess vuejs2 vue-router

回答 1 投票 0

如何约束用户选择今天日期以外的日期

我正在使用带有选项 API 的 Vue3。鉴于此 StackBlitz，我想知道如何为日期选择器设置 :max 值。我将 :max 设置为 new Date()，但我仍然可以选择今天以外的日期...

javascript vue.js vuejs2 vuejs3 vue-component

回答 1 投票 0

“npm run dev”在我的公共文件夹中创建 0.js, 1.js, ... 14.js 文件

我是使用 Webpack、NPM 和 VueJS 的初学者。我不知道我做了什么，我在互联网上找不到任何解决方案。当我在 VueJS 中运行命令 npm run dev 时，webpack 创建了 15 个从 0 开始编号的文件....

vue.js npm webpack vuejs2

回答 2 投票 0

类型错误：无法读取 Nuxt 中未定义的属性（读取“__ob__”）

从包含 ProductCard 组件的一个页面导航到另一页面时，会出现该错误。我相信错误来自数据获取或 Mounted()，但我无法解决它。

vue.js vuejs2 nuxt.js

回答 4 投票 0

Vue 项目中 TypeScript“找不到模块...”

我在Vue项目中使用TypeScript。但是当我尝试导入 vue 文件时，由于出现“找不到模块...”错误，我无法获取 .vue 文件。奇怪的是，intellisense 只显示目录 r...

typescript vue.js visual-studio-code import vuejs2

回答 4 投票 0

vue.js 函数中在上一个结束之前执行的行

我有以下功能来提交表单：方法： { 提交表单：函数（）{ this.drawing = dat.toImage(); this.$refs.my_form.submit() } } 绘图变量被分配给...

javascript vue-component vue.js vuejs2

回答 2 投票 0

在自定义组件上使用时，v-model 和 .sync 有什么区别

我不明白组件上使用的 v-model 和 .sync 之间的区别。 V-model 是将变量 (myVar) 绑定到组件本身的简写...

vue.js vuejs2 vue-component v-model

回答 2 投票 0

如何制作垂直可调整大小的<div>？

如何制作垂直可调整大小的？它们的高度是固定的，因此它们的内容应该可以滚动。如何制作垂直可调整大小的<div>？它们的高度是固定的，因此它们的内容应该可以滚动。在包含文本的容器上，您可以尝试添加以下代码： overflow: hidden; overflow-y: scroll; 如果您为容器设置固定高度，现在使用溢出：隐藏，您将隐藏容器外部的所有内容，并且使用溢出-y：滚动，您将允许垂直滚动到包含文本的容器

css vuejs2

回答 1 投票 0

VueJS Bootstrap <date-picker> 隐藏在<b-table> 行

我正在使用 VueJS (v2.6.10) 和 boostrap-vue (v2.0) 并尝试允许用户使用 vue-bootstrap-datetimepicker (v5.0.1) 在中输入记录的日期时间。问题是...

vue.js vuejs2 bootstrap-vue

回答 1 投票 0

为什么 Vuetify v-dialog value 属性在扩展组件时不起作用？

<template> <v-dialog v-bind="$props" :value="tempValue" persistent @keydown.ctrl.enter="handleSave" @keydown.esc="handleCancel" @click:outside="handleCancel" > <v-card>...</v-card> </v-dialog> </template> <script> import { VDialog } from 'vuetify/lib' export default { extends: VDialog, props: { // Direct binding to value prop does not work tempValue: undefined }, methods: { ... } } </script> 我正在使用名为 tempValue 的道具绑定到 value 道具，导致直接使用 value 不起作用。使用value（不起作用）  <FormDialog :value="true" ... ></FormDialog> 使用tempValue（有效） <FormDialog :temp-value="true" ... ></FormDialog> 你知道如何直接使用value吗？扩展 Vuetify 组件的正确方法是包装它。  <template>  <v-dialog v-bind="$attrs" persistent @keydown.ctrl.enter="handleSave" @keydown.esc="handleCancel" @click:outside="handleCancel" > <v-card>...</v-card> </v-dialog> </template> <script> // Do not extend VDialog export default { methods: { ... } } </script>

vuejs2 vuetify.js

回答 1 投票 0

Vue 2.7 Composition API 插件提供/注入

我正在尝试创建一个使用提供/注入组合 API 功能的 vue 2.7 插件。我似乎能够在自己的项目中使用提供/注入，但是当使用 npm 链接时，似乎所有人都这样

vue.js vuejs2 vue-composition-api

回答 1 投票 0

vuejs2 相关问题

最新问题