Vue.js

How do I warn a user of unsaved changes before leaving a page in Vue

由 余生长醉 提交于 2021-02-05 20:21:13
问题 I have an UnsavedChangesModal as a component that needs to be launched when the user tries to leave the page when he has unsaved changes in the input fields (I have three input fields in the page). components: { UnsavedChangesModal }, mounted() { window.onbeforeunload = ''; }, methods: { alertChanges() { } } 回答1: Assuming you're using vue-router (and you probably should be), then you'll want to use the beforeRouteLeave guard. The documentation even gives an example of this exact situation:

How do I warn a user of unsaved changes before leaving a page in Vue

由 孤街浪徒 提交于 2021-02-05 20:19:12
问题 I have an UnsavedChangesModal as a component that needs to be launched when the user tries to leave the page when he has unsaved changes in the input fields (I have three input fields in the page). components: { UnsavedChangesModal }, mounted() { window.onbeforeunload = ''; }, methods: { alertChanges() { } } 回答1: Assuming you're using vue-router (and you probably should be), then you'll want to use the beforeRouteLeave guard. The documentation even gives an example of this exact situation:

vue中使用element(菜鸟教程)

由 会有一股神秘感。 提交于 2021-02-05 14:47:44
前言： 在我们的vue项目中可供引入的框架是很多的，这里分享下在vue中使用element-ui的框架 element-ui官网入口 实现步骤： 一、引入 element-ui 方法1：安装 node 包 cnpm i element-ui --save 方法2： cdn 引入 <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> 二、 main.js 中注册（如果上面使用的是cdn引入则没有这一步） import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 三、到这一步 element-ui 应该配置的文件我们都引入成功了，下来该使用了 1、打开官网地址，参照下面的 4个小步骤 可以拿到想要的效果和代码 2、实际练习，以 el-button 按钮作案例，找到 Button ，然后找到 基础用法 ，点击 粉色圈 ，打开源代码 3

What is difference between 'data:' and 'data()' in Vue.js?

由 柔情痞子 提交于 2021-02-05 12:56:28
问题 I have used data option in two ways. In first snippet data object contains a key value, however, in second data is a function. Is there any benefits of individuals.Not able to find relevant explanations on Vue.js Docs Here are two code snippets: new Vue({ el: "#app", data: { message: 'hello mr. magoo' } }); new Vue({ el: "#app", data() { return { message: 'hello mr. magoo' } } }); Both are giving me the same output. 回答1: It seems as though the comments on your question missed a key point when

What is difference between 'data:' and 'data()' in Vue.js?

由 偶尔善良 提交于 2021-02-05 12:56:06
问题 I have used data option in two ways. In first snippet data object contains a key value, however, in second data is a function. Is there any benefits of individuals.Not able to find relevant explanations on Vue.js Docs Here are two code snippets: new Vue({ el: "#app", data: { message: 'hello mr. magoo' } }); new Vue({ el: "#app", data() { return { message: 'hello mr. magoo' } } }); Both are giving me the same output. 回答1: It seems as though the comments on your question missed a key point when

Using Vue with django

由 陌路散爱 提交于 2021-02-05 12:55:45
问题 I've recently started on some social media web site using Django. Im using the default django template engine to fill my pages. But at this moment, I want to add javascript to make the site more dynamic. This means: The header and footer is the same on each page . The header should have a dropdown menu, a search form that searches when you're typing. My current django application has a base template that has the header and footer HTML, since every page should have this. The site consists of

VSC PowerShell. After npm updating packages .ps1 cannot be loaded because running scripts is disabled on this system

由 佐手、 提交于 2021-02-05 12:52:13
问题 I design websites in VSC and PowerShell is my default terminal. After updating and deploying a website to firebase earlier, I was prompted to update firebase tools - which I did using npm. Immediately after I cannot run/access any firebase scripts wthout the folllowing error: firebase : File C:\Users\mada7\AppData\Roaming\npm\firebase.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/

Use Vue Router In Script

由 微笑、不失礼 提交于 2021-02-05 12:18:27
问题 I have a script that will redirect a user to the login screen when they get a response code of 401 - which means their session has expired within the API. import axios from 'axios'; axios.interceptors.response.use(function (response) { return response; }, function(error) { if(error.response.status === 401) { localStorage.clear(); window.location = '/'; return Promise.reject(error); } return Promise.reject(error) }) I wish to use vue router instead of window.location to redirect to the login

Is there something like Vue.unuse to stop using a plugin?

由 ∥☆過路亽．° 提交于 2021-02-05 11:57:06
问题 I created a SignalR plugin for Vue: import AxiosPlugin from "@/plugins/axios"; import { HubConnectionBuilder, LogLevel } from "@aspnet/signalr"; import { PluginObject } from "vue"; export class SignalRPluginOptions { } const SignalRPlugin: PluginObject<SignalRPluginOptions> = { install(Vue) { const connection = new HubConnectionBuilder() .withUrl("http://localhost:5100/question-hub") .configureLogging(LogLevel.Error) .build(); let startedPromise = null; function start() { startedPromise =

Is there something like Vue.unuse to stop using a plugin?

由 坚强是说给别人听的谎言 提交于 2021-02-05 11:56:02
问题 I created a SignalR plugin for Vue: import AxiosPlugin from "@/plugins/axios"; import { HubConnectionBuilder, LogLevel } from "@aspnet/signalr"; import { PluginObject } from "vue"; export class SignalRPluginOptions { } const SignalRPlugin: PluginObject<SignalRPluginOptions> = { install(Vue) { const connection = new HubConnectionBuilder() .withUrl("http://localhost:5100/question-hub") .configureLogging(LogLevel.Error) .build(); let startedPromise = null; function start() { startedPromise =
订阅 Vue.js