vue.js - 为什么当我在 Vue.js 中导入 lodash 时它不起作用
问题描述
我使用“vue create todo --default”命令创建了一个全新的 vue.js 安装。之后,我也使用此命令“npm i --save lodash”安装了 lodash。我可以在我的 package.json 中的“依赖项”对象上看到它。问题是当我在 main.js 上导入它并使用 lodash 函数时,它显示错误“_ 未定义”。所以我尝试在 App.vue 中导入它。错误“_ 未定义”已删除,但它不起作用。
这是 App.vue、main.js 和 package.json 中的代码
main.js
import Vue from 'vue'
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css";
import "jquery/dist/jquery";
import "bootstrap/dist/js/bootstrap.min";
import _ from "lodash";
Vue.prototype._ = _;
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
应用程序.vue
<template>
<div id="app">
<h4 class="bg-primary text-white text-center p-2">
{{name}}'s' To Do List
</h4>
<div class="container-fluid p-4">
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
<div class="row" v-for="t in completedtask" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2">
<input type="checkbox" v-model="t.done" class="form-check-input">
{{t.done}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
name: "Welly",
tasks: [{
action: "Buy Flowers",
done: false
},
{
action: "Get Shoes",
done: false
},
{
action: "Collect Tickets",
done: true
},
{
action: "Call Joe",
done: false
}
]
};
},
computed: {
hidecompletedtask(){
return _.map(this.tasks,(val)=>{
return !val.done;
});
}
}
}
</script>
<style>
</style>
包.json
{
"name": "todo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.4.1",
"core-js": "^3.4.4",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"popper.js": "^1.16.1",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
解决方案
您仍然需要通过this
上下文访问原型,例如this._.map()
.
computed: {
hidecompletedtask() {
return this._.map(this.tasks, (val) => {
return !val.done;
});
}
}
参考:添加实例属性。
或者,您可以扩展全局window
对象。将以下行放入您的main.js
(或某些引导文件)中。
window._ = require('lodash');
您需要图书馆的其他地方:
computed: {
hidecompletedtask() {
// The underscore (_) character now refers to the `window._ object`
// so you can drop the `this`.
return _.map(this.tasks, (val) => {
return !val.done;
});
}
}
推荐阅读
- reactjs - 为什么 MateriaUI 日期选择器不会“淡化”导出?
- javascript - 下载完成后删除本地文件
- spring - 如果授权标头中缺少承载令牌,请勿将 API 请求重定向到登录页面
- jquery - Jquery toggleClass 不改变类
- python - pyenv 没有使用正确的 python 版本
- html - CSS 文件没有链接到 HTML,也没有按照 CSS 代码进行格式化
- asp.net - 未找到与请求 URI 'https://localhost:44386/odata/Customers' 匹配的 HTTP 资源
- r - 基于列的一部分映射值
- javascript - 如何在 Angular 中使用单独的 .ts 文件中的动画触发器?
- javascript - NgOnInit 没有在服务订阅中执行代码