天道酬勤,学无止境

vue.js

How to fix BrowserslistError in vue.js?

I created a project with vue create command, changed the directory and used npm run serve command. The error came up. I tried updating the npm packages, but it didn't work. error in ./src/main.js Module build failed (from ./node_modules/babel-loader/lib/index.js): BrowserslistError: [BABEL] C:\Users\peter\test\src\main.js: C:\Users\peter\test contains both browserslist and package.json with browsers (While processing: "C:\\Users\\peter\\test\\node_modules\\@vue\\babel-preset-app\\index.js") at C:\Users\peter\test\node_modules\browserslist\node.js:263:15 at eachParent (C:\Users\peter\test\node

2022-06-02 14:20:04    分类:问答    vue.js   vue-cli

How to set data to other Component in Vuejs

问题 回答1 您在bus.$on中使用了一个function ,所以this不是您认为的那样。 改用箭头函数,它可以工作。 const bus = new Vue(); Vue.component('coupon', { data() { return { name: 'tri' } }, template: ` <div> <p>{{ name }}</p> <button type="button" @click="batdau">Go</button> </div> `, methods: { batdau(name) { this.name = 'Maria'; } }, created() { }, mounted() { bus.$on('applied', (name) => { alert(name); this.name = 'Romeo'; }) } }); Vue.component('couponmore', { template: ` <button type="button" @click="nosukien">Let Set Name</button> `, methods: { nosukien() { bus.$emit('applied', 'John'); } } }); new Vue({ el: '#root', data: {

2022-05-17 02:23:36    分类:技术分享    vue.js   vuejs2

Vue Js how to use in mixins in single file template?

问题 大家好,我是 Vue JS 的新手,我正在尝试使用单个文件模板在我的过滤器上使用 mixins,但我遇到了一些困难 我得到的错误 Unknown custom element: <side-bar-one> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 组件.js Vue.component('sideBarOne', require('./component/sidebars/sideBarOne.vue')); sideBarOne.vue import { default as config } from '../../../config'; import { filters as filter } from '../../../mixins/filters'; export default { mixins: [ filter, ], mounted: function() { } } 过滤器.js import { default as config } from '../config'; module.exports = { filters: { useLGLogo( str ) { if(

2022-05-16 21:47:04    分类:技术分享    javascript   vue.js   frontend   vuejs2   vue-component

How to use Facebook SDK with Nuxt.js?

问题 你可以看看我的代码。 npm install vue init nuxt/koa my-project (koa@2) 页面 |- 登录.vue <script> export default { name: 'login', method: { login () { let vm = this FB.login(function (response) { vm.statusChangeCallback(response) }, {scope: 'publish_actions'}) } }, mounted () { console.log('mounted') let vm = this window.fbAsyncInit = () => { FB.init({ appId: 'my-facebook-app-id', cookie: true, xfbml: true, version: 'v2.8' }) FB.getLoginStatus(function (response) { vm.statusChangeCallback(response) }) } (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js

2022-05-16 19:31:04    分类:技术分享    facebook   vue.js   authentication   sdk   nuxt.js

Understanding the 'this' keyword in Vue

问题 我已经开始从零开始学习 VueJS。 我正在关注他们的官方指南。 但我被困在这里:https://vuejs.org/v2/guide/#Handling-User-Input 在这个例子中... var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) ..如何直接访问message属性而不引用data对象? 如果this关键字引用当前的 Vue 实例,不应该像这样访问message属性: this.data.message吗? 考虑以下示例: ({ name: "John Doe", data: { message: "Hello World" }, greet: function(){ console.log("I am " + this.name); console.log("I have a message for you: " + this.data.message); //see here } }).greet(); 这就是我在 vanilla javascript

2022-05-16 17:37:04    分类:技术分享    javascript   vue.js   vuejs2

Vue.js/vuex ajax update components with ajax state

问题 我正在使用带有 vuex 的 vue webpack 模板,我基本上遇到了组件不随状态更新的问题。 我有一个商店 const state = { userData: {}, } 在我的应用程序中,我有一个方法 methods: { addUserData: function() { const that = this; axios.get('URL').then(function (response) { let obj = response.data; that.$store.commit('addUserData', {obj}); }); }, 我在安装时调用 mounted () { this.addUserData(); }, 哪个更新了一个突变 const mutations = { addUserData(state, {obj}) { state.userData = obj; },} 到目前为止一切都很好,数据正在进入商店。 但是我有一个不工作的组件,因为它没有等待 ajax 完成加载,也没有以任何方式绑定。 我可能在这里做错了,但基本上在我的组件中 data () { return { weekData : { weekDataList: [].... methods: { tester: function(a) { // Sorting the

2022-05-16 15:38:10    分类:技术分享    javascript   vue.js   vuex

Can't access root data in VueJS

问题 这是我在stackoverflow上的第一篇文章,如果我做错了什么,请提前道歉。 我的问题; 我已经设置了一个 VueJS 项目,我正在尝试从另一个组件获取我放入 App.vue 的数据。 为此,我使用 this.$root.count 例如,但它返回未定义。 主.js: import Vue from 'vue' import VueRouter from 'vue-router' import App from './App' Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes: [{ path: '/', name: 'home', component: function (resolve) { require(['./components/Hello.vue'], resolve) } }, { path: '/race-pilot', name: 'racePilot', component: function (resolve) { require(['./components/RacePilot.vue'], resolve) } } }); new Vue({ el: '#app', router, template: '<App/>', components:

2022-05-16 12:57:04    分类:技术分享    javascript   object   vue.js

VueJS 2.0 Communicating from the Parent to the Child

问题 我确信有一种简单的方法可以做到这一点,但我无法弄清楚。 在我的 html 文件中,我有以下按钮: <button @click="showModal">Show Modal</button> 单击该按钮运行以下方法: new Vue({ el: '#root', methods: { showModal() { Event.$emit('showModal'); }, } }); 当我单击该按钮时,我想要在模态组件中切换一个类。 这是组件的相关代码: Vue.component('modal', { template: ` <div :class="[ modalClass, {'is-active' : isActive }]"> ETC... </div> ` data() { return { isActive: false, modalClass: 'modal' } } 我是 VueJS 的新手,正在尝试弄清楚如何在 Vue 中进行通信。 我似乎无法弄清楚下一步。 当单击按钮时,我该怎么做才能将 isActive 设置为 true? 谢谢你的尽心帮助。 祝一切顺利, 摩西 回答1 在你的 main.js 中(或者你实例化你的 Vue 应用程序的地方) 您可以使用普通的 vue 实例作为事件总线 Vue.prototype.bus = new Vue()

2022-05-16 12:41:07    分类:技术分享    javascript   vue.js   vuejs2   vue-component

VueJS close Hamburger Menu on Route Change

问题 我有一个简单的 VueJS 应用程序,带有来自 Bootstrap 的导航栏: <template> <header id="header"> <nav class="navbar mynavbar navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="logo" href="index.html"><img src="images/logo.png" alt=""></a> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav

2022-05-16 11:25:04    分类:技术分享    javascript   twitter-bootstrap   twitter-bootstrap-3   vue.js   vuejs2

Vue components css background-image path error

问题 输出 output: { path: config.build.assetsRoot, publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, filename: '[name].js' } 根据 build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', productionSourceMap: false, productionGzip: false, productionGzipExtensions: ['js', 'css'] }, 构建后,索引页面正常工作,css背景图像路径是这样的 background: url(./static/img/bg_certificate.c5cad1e.png) no-repeat 50%; 但是组件css background-image

2022-05-16 08:29:04    分类:技术分享    vue.js   webpack-2   vue-loader