vuejs2 相关问题

如何在 vue.js 中创建始终大写的输入？

我正在使用 vue.js 创建一个表单，我需要在 vue 中创建始终大写的输入。我知道我可以使用 css 属性 文本转换：大写； 然后转换之前的数据

将 props 传递给路由而不需要 URL 参数

我想将数据传递到路由，而不需要在路径中定义参数。我已经能够通过使用查询参数来完成传递数据，但我不想在...

Vuetify v-data-table 将列拖动到一起并调整大小

我正在使用 vuetify v-data-table。我使用 SortableJs 实现拖动列，并且还可以调整列的大小。 当我拖动列时，它可以正常工作，但之后调整大小不再起作用。 我正在使用 vuetify v-data-table。我使用 SortableJs 实现拖动列，并且还可以调整列大小。 当我拖动列时，它可以正常工作，但之后调整大小不再起作用。 <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts" sort-by="calories" disable-sort v-sortable-table="{onEnd:sortTheHeadersAndUpdateTheKey}" :key="anIncreasingNumber" > </v-data-table> </v-app> </div> 这是我的codepen 提前致谢。 正如我在here所看到的，Vuetify 团队现在对执行此功能不感兴趣。 感谢您提出功能请求以及对改进 Vuetify 的兴趣。不幸的是，这不是我们现在想要实现的功能。 现在，您可以检查这个 CodepPen 它会为您解决问题。 如果您不想手动执行此操作，可以安装一个名为 vue-columns-resizes-vuetify 的 npm 包 <!-- Credit Column Resize - Web Dev Tricks https://webdevtrick.com/resizable-table-columns/ Vuetify Datatable - Vuetify Example https://vuetifyjs.com/en/components/data-tables/ --> <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts" class="elevation-1" > </v-data-table> </v-app> </div> th, td { border-right: 1px solid grey; } new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { headers: [ { text: 'Dessert (100g serving)', sortable: false, value: 'name'}, { text: 'Calories', sortable: false, value: 'calories' }, { text: 'Fat (g)', sortable: false, value: 'fat' }, { text: 'Carbs (g)', sortable: false, value: 'carbs' }, { text: 'Protein (g)', sortable: false, value: 'protein' }, { text: 'Iron (%)', sortable: false, value: 'iron' }, ], desserts: [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%', }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: '1%', }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: '7%', }, { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: '8%', }, { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, iron: '16%', }, { name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: '0%', }, { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, iron: '2%', }, { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: '45%', }, { name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: '22%', }, { name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: '6%', }, ], } }, }) var tables = document.getElementsByTagName('table'); for (var i=0; i<tables.length;i++){ resizableGrid(tables[i]); } function resizableGrid(table) { var row = table.getElementsByTagName('tr')[0], cols = row ? row.children : undefined; if (!cols) return; table.style.overflow = 'hidden'; var tableHeight = table.offsetHeight; for (var i=0;i<cols.length;i++){ var div = createDiv(tableHeight); cols[i].appendChild(div); cols[i].style.position = 'relative'; setListeners(div); } function setListeners(div){ var pageX,curCol,nxtCol,curColWidth,nxtColWidth; div.addEventListener('mousedown', function (e) { curCol = e.target.parentElement; nxtCol = curCol.nextElementSibling; pageX = e.pageX; var padding = paddingDiff(curCol); curColWidth = curCol.offsetWidth - padding; if (nxtCol) nxtColWidth = nxtCol.offsetWidth - padding; }); div.addEventListener('mouseover', function (e) { e.target.style.borderRight = '2px solid #0000ff'; }) div.addEventListener('mouseout', function (e) { e.target.style.borderRight = ''; }) document.addEventListener('mousemove', function (e) { if (curCol) { var diffX = e.pageX - pageX; if (nxtCol) nxtCol.style.width = (nxtColWidth - (diffX))+'px'; curCol.style.width = (curColWidth + diffX)+'px'; } }); document.addEventListener('mouseup', function (e) { curCol = undefined; nxtCol = undefined; pageX = undefined; nxtColWidth = undefined; curColWidth = undefined }); } function createDiv(height){ var div = document.createElement('div'); div.style.top = 0; div.style.right = 0; div.style.width = '5px'; div.style.position = 'absolute'; div.style.cursor = 'col-resize'; div.style.userSelect = 'none'; div.style.height = height + 'px'; return div; } function paddingDiff(col){ if (getStyleVal(col,'box-sizing') == 'border-box'){ return 0; } var padLeft = getStyleVal(col,'padding-left'); var padRight = getStyleVal(col,'padding-right'); return (parseInt(padLeft) + parseInt(padRight)); } function getStyleVal(elm,css){ return (window.getComputedStyle(elm, null).getPropertyValue(css)) } }; 它工作得很好，但是你知道如何保存通过这种方法设置的宽度吗？ 当我拖动并调整大小，然后更改分页或排序顺序时，宽度不会被记住。

Vue PWA 刷新后未获取新内容

我是 Vue 新手，并使用 PWA Service-worker 插件创建了一个项目。部署我的应用程序的新版本后，我在控制台中收到以下消息： 刷新页面（F5）后，这些消息仍然存在

为 Vuetify 组件全局设置 props（在我的例子中为“v-data-table”）

我的用例如下： v-data-table 的 prop rows-per-page-items 的默认值为 [5,10,25,{"text":"$vuetify.dataIterator.rowsPerPageAll","value":-1}] API 文档 我想超越...

具有延迟加载功能的 Vue 命名视图

我正在尝试创建我的路线，但我希望它们都使用我的应用程序中的默认路由器视图。 查看文档： https://router.vuejs.org/guide/essentials/named-views.html 我应该是一个...

如何在vue.js中使用带复选框的v-model？

在vue2 js中，我想使用带有v模型的复选框。 我想要测试复选框的值，但是...

少数情况下无法执行vue的全局errorHandler

虽然我在 vue 2 项目中遇到问题，但演示也面临类似的问题，即 main.js 中定义的全局错误处理程序不起作用 视图3 https://stackblitz.com/edit/vitejs-vite-sv...

VueJS：简单脚本未处理的错误

还在学习VueJS，我只是想知道为什么当我点击按钮时我的功能选择不起作用。 创建的（）中的所有其余部分都很好并且显示了正确的，但是在我的方法部分......

Nuxt.js：如何为每篇文章创建动态 nuxt 链接/路由？

我在弄清楚动态 nuxt-link 时遇到了麻烦。 在主页（localhost:3030/）上，有一些文章是由axios从后端服务器获取的。 每篇文章都必须指向...

一起使用v-model和@input

我在vue中有一个选择输入。每次我选择一些东西时，我都需要进行条件检查。我需要检查 v-model 中使用的数据。我的问题是，数据在输入功能之前更新了吗...

如何让 CSS 模块在 Vue 类绑定中工作？

Google 已经帮不了我了。 我在 Vue 中有这样的模板： 每个...

如何使用pug模板将Vite集成到现有的旧express应用程序中

我有一个旧代码，它使用 Express 并使用 pug 渲染 HTML。 它使用纯 js 文件并导入它们，如下所示： 脚本（类型='文本/javascript'src='js/test.js'） 他们在这些 js 文件周围使用 jquery...

如何在Windows上使用https运行Vue-cli项目

我正在尝试使用 https 运行 vue-cli 项目。 按照此处的说明如何使用 https 运行 Vue.js 开发服务？ 我已将 https 设置添加到 vue.config.js，如下所示： 模块.导出...

Vue 3，Transition 和 KeepAlive 嵌套在 RouterView 中

我正在将我的应用程序从 Vue 2 迁移到 Vue 3，但 KeepAlive 似乎不起作用。我尝试导航到 KeepAlive 中包含的上一页，但状态未缓存...

当 vue 2 中 prop 的值发生变化时，计算属性不会更新

我传递一个道具，当它的值发生变化时，我尝试使用观察者更新计算属性。 在我的组件中，我有一个名为 字段：对象 计算的 valueFromField() { 返回这个...

禁用 v-list 时，Vuetify v-tooltip 不显示

我在禁用的 v 列表上显示工具提示时遇到困难。 我想在 isDisable 属性存在时禁用列表。 示例代码： 我在禁用的 v 列表上显示工具提示时遇到困难。 我想在 isDisable 属性存在时禁用列表。 示例代码： <v-list> <v-list-item v-for="(action, i) in actions" :key="`action-${i}`" :disabled="action.isDisable" > <v-tooltip> <template v-slot:activator="{ on, attrs }"> <v-list-item-content v-bind="attrs" v-on="on"> <v-list-item-title>{{ action.name }}</v-list-item-title> </v-list-item-content> </template> <span>Tooltip for disabled list.</span> </v-tooltip> <v-list-item-content v-else> <v-list-item-title>{{ action.name }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> 当 VListItem 被禁用时，指针事件通过 CSS 被禁用： .v-list-item--disabled { pointer-events: none; } 所以没有 mouseenter 事件，也没有 VTooltip。 最简单的修复方法是覆盖它： .v-list-item.v-list-item--disabled{ pointer-events: auto; } new Vue({ el: '#app', vuetify: new Vuetify(), template: ` <v-app> <v-main> <v-container> <v-list> <v-list-item v-for="(action, i) in actions" :key="i" :disabled="action.isDisable" > <v-tooltip> <template v-slot:activator="{ on, attrs }"> {{log(on, attrs)}} <v-list-item-content v-bind="attrs" v-on="on"> <v-list-item-title>{{ action.name }}</v-list-item-title> </v-list-item-content> </template> <span>Tooltip for disabled list.</span> </v-tooltip> </v-list-item> </v-list> </v-container> </v-main> </v-app> `, data(){ return { actions: [ {name: 'action 1', isDisable: true}, //{name: 'action 2', isDisable: false}, ] } }, methods: { log: (...x) => console.log(...x) } }) .v-list-item.v-list-item--disabled{ pointer-events: auto; } <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

行 ID 未使用 vue ag-grid 分配

我正在尝试使用用户定义的行ID来防止重新渲染，而不是应用程序分配的ID，如Vue ag-grid文档中所述。然而，唯一的 row-id 没有被分配给行并且......

msal 授权代码流程中的网址碎片，并且身份验证后，代码不会作为查询参数出现

配置码： 函数 fetchAzureMSALInstance() { 让 azureMsalConfig = { 授权：{ clientId: 'e154806f-ba69-417f-a60c-b1c89b2ffa01', 权限：'https://login.

根据 Vue 2 中的 prop，使用或不使用包装器渲染槽

我有一个简单的组件，只需向插槽添加样式。样式部分并不复杂：它只是根据传递的道具添加填充/边距/边框/背景颜色，仅此而已。 现在有一个