Questions tagged «vue.js»

我认为这应该很简单，但是我在如何导入和使用Vue单个文件组件中的图像时遇到了一些麻烦。有人可以帮我怎么做吗？这是我的代码段： <template lang="html"> <img src="zapierLogo" /> </template> <script> import zapierLogo from 'images/zapier_logo.svg' export default { } </script> <style lang="css"> </style> 我尝试使用:src，src="{{ zapierLogo }}"等。但是似乎没有任何作用。我也找不到任何例子。有什么帮助吗？

74 vue.js  vuejs2  webpacker 

如何在vue.js应用程序中访问JSON对象我是新手 import json from './json/data.json' JSON文件已加载，现在我必须访问其中的对象

73 javascript  vue.js  vuejs2 

好的，简单解释一下： 我有3页。 第1页（首页） 第2页（菜单） 第3页（关于） 第1页有- <router-link to="/menu"> 单击该按钮将转到“ /菜单”。 目前，第2页（菜单）有一个 <router-link to="/"> 按钮，然后单击此按钮，它将返回到先前的位置“ /”第1页（主页）。 但是我不想为路由器的每个页面创建一个组件以“返回”上一页（好像我有100个页面，这可能会路由很多工作）。有没有办法用vue-router做到这一点？类似于window.history.back（） 好奇是否有办法做到这一点，因为我在文档中找不到它。 提前致谢！约翰

72 javascript  webpack  vue.js  vuejs2  vue-router 

我是Vue.js的新手，我已经使用AngularJS一段时间了，并且在过去我们使用Angular来加载模板，例如， template: '/sometemplate.html', controller: 'someCtrl' 我们如何在Vue中做这样的事情，而不是像这样在JavaScript中保留大型HTML模板， new Vue({ el: '#replace', template: '<p>replaced</p>' }) 小型模板可以这样做，但大型模板是否可行？ 有没有办法加载外部模板HTML或在Vue中的脚本标签内使用HTML模板？ <script type="x-template" id="template>HTML template goes here</html>

69 javascript  jquery  angularjs  vue.js 

如何找到与DOM元素相对应的vue.js组件？ 如果我有 element = document.getElementById(id); 是否有一个等效于jQuery的vue方法 $(element)

69 javascript  dom  vue.js 

我用vue-cli 4.1.1创建了一个项目，运行完纱服务后，出现以下错误 Error: [BABEL] C:\dev\vuestudy\src\main.js: Cannot find module './src/data' (While processing: "C:\\dev\\vuestudy\\node_modules\\@vue\\cli-plugin-babel\\preset.js") 有什么提示吗？ 提前致谢。 更新： Kousha和Dave是正确的，在等待core-js软件包更新之后，我创建了一个新项目，现在它可以工作了。

18 vue.js  babel 

我正在将VueJS与框架VuetifyJS（v2.0.19）一起使用。我在运行npm run serve后收到此错误： Sass Loader已使用与API模式不匹配的选项对象进行了初始化。 我尝试了什么：我已经删除了node_modules文件夹，并将所有npm软件包和node.js重新安装/更新为最新的稳定版本。 完整的错误消息： error in ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. - options has an unknown property 'indentedSyntax'. These properties are valid: object { implementation?, sassOptions?, …

17 node.js  vue.js  npm  sass  node-modules 

让我的polyfill在Edge中工作时遇到了很大的麻烦。我尝试了各种尝试，但都没有按照文档进行操作。这似乎是有希望的。最后特别是那是行不通的。这是在vuex模块中发生的，因此我尝试将vuex添加到vue.config中的transpileDependencies，但是没有运气。 我的babel.config.js： module.exports = { presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry', }]], }; 在我的main.js中，最顶部有以下两个导入： import 'core-js/stable'; import 'regenerator-runtime/runtime'; 我的vue.config.js // eslint-disable-next-line import/no-extraneous-dependencies const webpack = require('webpack'); const isProd = process.env.NODE_ENV === 'production'; module.exports = { configureWebpack: { // Set up all the aliases we use in our app. plugins: [ new …

15 javascript  vue.js  vuejs2  babel  polyfills 

我正在处理HTML表并html-to-paper在vue.js中使用该表将其打印到打印机，我正在做的工作是单击添加以创建新行，然后单击打印，我试图打印该表，但它没有任何仅显示空白单元格的数据 代码应用程序 <template> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <div id="printMe"> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <tr v-for="(tableData, k) in tableDatas" :key="k"> <td> <input class="form-control" readonly v-model="tableData.itemname" /> </td> <td> <input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.quantity" …

14 javascript  css  vue.js  printing  vuejs2 

ERROR in C:/phpStudy2018/PHPTutorial/WWW/Tms.Web/node_modules/@types/node/globals.d.ts(139,11): 139:11 Interface 'NodeRequire' cannot simultaneously extend types 'Require' and 'RequireFunction'. Named property 'cache' of types 'Require' and 'RequireFunction' are not identical. 137 | 138 | // For backwards compability > 139 | interface NodeRequire extends NodeJS.Require {} | ^ 140 | interface RequireResolve extends NodeJS.RequireResolve {} 141 …

12 typescript  vue.js  webpack 

我发生了以下顺序： 主屏幕 载入画面 结果画面 在主页上，当有人单击按钮时，我将其通过以下方式发送到加载屏幕： this.$router.push({path: "/loading"}); 任务完成后，将通过以下方式将其发送到结果屏幕 this.$router.push({path: "/results/xxxx"}); 问题是，通常他们希望从结果返回主屏幕，但是当他们单击返回时，它们将被发送到再次加载，从而将它们发送回结果，因此它们陷入了无限循环并且无法前进返回主屏幕。 任何想法如何解决这一问题？理想情况下，我希望有一个类似的选择： this.$router.push({path: "/loading", addToHistory: false}); 这会将他们发送到该路线而不将其添加到历史记录中。

12 javascript  vue.js  vue-router 

使用已安装docker的Ubuntu Linux。没有虚拟机。 我已经用vuejs应用程序构建了一个docker镜像。要启用热重载，我使用以下命令启动docker容器： docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image 它启动正常，我可以从主机浏览器访问它localhost:8081。但是，当我对源文件进行更改并保存这些更改时，在按F5之前它们不会反映在我的浏览器中（热重装不起作用）。 以下是一些详细信息： package.json "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", build / webpack.dev.conf.js devServer: { clientLogLevel: 'warning', ... hot: true, ... watchOptions: { //poll: config.dev.poll, //aggregateTimeout: 500, // …

10 docker  vue.js  webpack-dev-server 

我正在为vue.js中的composition API组件开玩笑地编写单元测试。 但是我无法访问Composition API的setup（）中的函数。 指标值 <template> <div class="d-flex flex-column justify-content-center align-content-center"> <ul class="indicator-menu d-flex justify-content-center"> <li v-for="step in steps" :key="step"> <a href="#" @click="updateValue(step)" :class="activeClass(step, current)"> </a> </li> </ul> <div class="indicator-caption d-flex justify-content-center"> step <span> {{ current }}</span> from <span> {{ steps }}</span> </div> </div> </template> <script lang="ts"> import {createComponent} from …

9 typescript  unit-testing  vue.js  jestjs  vue-composition-api 

我使用Vue已有一段时间了，我的经验一直是，如果更新了其基础反应性数据，该方法将重新计算。我在SO上遇到了冲突的信息： 我试图回答这个问题，并多次被告知并非如此。 此处接受的答案表示“ [a方法]仅在您显式调用它时才会被评估。” 我搜索了文档，但没有发现任何令人难以置信的清晰之处。 如果它们没有反应性，那么为什么这个示例起作用？ <ul> <li v-for="animal in animals" :key="animal.id"> <span v-if="isAwesome(animal)">{{ animal.name }}</span> </li> </ul> export default { data() { return { awesomeAnimalIds: [], animals: [ { id: 1, name: 'dog' }, { id: 5, name: 'cat' }, { id: 9, name: 'fish' }, ], }; }, …

9 vue.js 

我用基本路径创建了一个新的Vue应用程序。由于该应用程序已嵌入到另一个Vue应用程序中，因此该应用程序无法呈现router-view在启动时。如果您想进一步了解此应用程序如何或为何嵌入到另一个应用程序中，请在此处查看： 将Vue应用安装到主Vue应用的容器中 我对这个问题的回答： https://stackoverflow.com/a/58265830/9945420 启动我的应用程序时，它将呈现除以外的所有内容router-view。我想在启动时通过给定的浏览器URL进行重定向。这是我的路由器配置： import Vue from 'vue'; import Router from 'vue-router'; import One from './views/One.vue'; import Two from './views/Two.vue'; Vue.use(Router); const router = new Router({ base: '/my-embedded-app/', mode: 'history', routes: [ { path: '/', component: One, }, { path: '/two', component: Two, }, ], }); router.replace(router.currentRoute.fullPath); export default …

9 javascript  vue.js  vuejs2  vue-router