问题标签 [vue-cli-4]

我正在使用 Vuetify 当前的CRUD Datatable UI 组件（与 Vue.js2 兼容），并且我正在尝试计算产品的小计乘以产品的数量与其价格。以前我在 javascript 中使用静态数据对其进行测试，但现在我连接了后端以从数据库中检索实际数据。这就是我使用静态数据的方式：

HTML：

JAVASCRIPT：

添加 Array.map.map(detail => ({...detail, subtotal: detail.quantity*detail.price}) ),可以计算每个产品的总数，但仅在显示静态数据时，如以下示例所示：

现在我已经连接了后端，我不得不删除静态数据，因为它不再有用了，所以我稍微更改了代码。这是它现在的样子：

更新的 HTML：

更新的 JAVASCRIPT：

我正在尝试在文本字段中输入现有的条形码并调用由事件searchBarcode()触发的条形码keyup.enter。如果条形码存在于数据库中，它会检索其数据（产品名称、数量、价格）并将其添加到数据表中，如下图所示：

如您所见，数据按应有的方式显示，但小计除外。details:[]如果数组中没有任何内容，除非在触发事件后填充，否则我如何通过将产品的价格乘以其数量来计算总数？

我正在使用 Vuetify 当前的CRUD Datatable UI 组件（与 Vue.js2 兼容）制作购物车。以前，我遇到了一个问题，即通过将产品的数量乘以价格来计算产品的总和。detailsWithSubTotal()幸运的是，通过使用计算函数来计算总数并将数据表的:item值（以前"details"）替换为，我得到了一个很好的解决方案，:item="detailsWithSubTotal"如下面的代码所示：

HTML

JAVASCRIPT

虽然这有助于解决我之前的问题，但现在我无法删除添加的细节。

在将@click事件中的数组参数保持为@click="deleteDetail(details, item) 并将数据表的:item值保持为的同时:items="details"，删除按钮可以正常工作，但是小计计算不起作用，如下图所示：

但是当将数组参数替换为@click="deleteDetail(detailsWithSubTotal, item) 和:item值替换为时:items="detailsWithSubTotal"，它会计算小计但删除按钮停止工作。

如何在不干扰detailsWithSubTotal()计算函数的情况下删除数据表上添加的行？

我正在使用 Vuetify 当前的CRUD Datatable UI 组件（与 Vue.js2 兼容）制作购物车，我正在尝试type="number"为两列添加一个文本字段，quantity并将price它们链接到它们各自的值以计算它们的总数。

在这里，您可以看到它如何添加、从 2 个静态值计算总计（我暂时使用计算函数来测试小计计算），并在以下代码中毫无问题地删除：

HTML：

JAVASCRIPT：

在我一直用作构建此购物车的参考的示例中，他没有显示来自 javascript 的数据，而是来自 HTML 的数据<td>，props.items正如您在下面的代码中看到的那样：

以前的版本（我发现的这个例子来自 2 岁以前的 vue.js 版本）：

他的例子是这样的：

虽然这是我的数据表在我的代码中的样子（使用硬编码quantity和price值时）：

由于我没有使用 any<td>或 any props，我如何在数据表中实现一个文本字段并将它们链接到它们的值以便能够计算产品总数？

如果我vue create my-new-app使用最新的 Vue Cli（当前版本 4.4.6）运行，是否会实现所有新的 ES2020 功能？（我已经测试过“可选链接”并且似乎能够使用它）

如果是这样，我如何从脚手架代码中分辨出来？我@vue/cli-plugin-babel/preset在 babel.config.js 中看到，是这样吗？

相信ES2020已经正式完成了。让我知道这是否不正确。

好的，

所以我认为这是一个非常简单的任务，我npm uninstall -g vue-cli以管理员身份运行，但它返回up to date in 0.043s。

我不确定如何从我的机器中正确删除 vue js。

我正在运行 windows 8.1 pro、vue-cli 4.1.2、npm 6.14.4、节点 v12.14.1

version 4.3 of vue cli is in use.
I hope the external css file will be created separately after the build.
I have to use that file somewhere else.

我一直在尝试npm run serve在使用 Vue CLI 生成的新 vue 项目上运行。我只是创建项目，vue create app然后将目录更改为项目本身cd app并运行npm run serve我之前在其他项目中做过的事情，但从昨天开始我一直收到此错误：我收到此错误：

我已经尝试删除我的node_modules然后运行npm i但它没有解决它。还尝试将 vue CLI 更新到最新版本，npm i @vue/cli但也无济于事。

我创建的所有新项目都会发生这种情况请帮助！

我正在使用这些包。

运行脚本 -

我的.eslintrc.js

打开项目并运行时 npm run serve，eslint 显示错误。然后我通过按 ctrl + c 退出服务器并npm run serve再次运行，之后，当我知道有很多错误时，eslint 永远不会在控制台中显示任何错误。

知道为什么吗？

我遇到了 sass 文件的问题（当我删除 sass 文件时，所有构建过程都成功通过），错误是：

据我了解，我需要添加一些加载器到我的vue.config.js，但我不明白我需要添加什么加载器？从错误中，不清楚是哪个文件/行确切导致了问题（我有几个scss 文件）

在我的 Vue 应用程序中，我将 SCSS 文件导入App.vue如下：

在我的main.scss文件中，我有：

当我运行时yarn build，我收到以下错误：

我尝试更改url(./images/image.png);为url(~/images/image.png);并且错误几乎相同-只是图像的路径不同，例如；'../../../../../../images/image.png

我试图安装resolve-url-loader- 这没有帮助。

我的文件结构是：

我究竟做错了什么？

更新 我试图将它移到background: url(../images/image.png);sass 文件之外，现在看起来像

./另外，我尝试了以with ~， with开头的路径@，其中一些是错误的，有时错误是无法解决，有时错误是ModuleParseError: Module parse failed: Unexpected character '�' (1:0)

花一整天时间寻找解决方案，看起来我尝试了我在互联网上找到的所有不同的解决方案，但仍然不适合我...... :(