반응형

vuejs2 417

Vue 인스턴스에서 글로벌 믹스인 메서드를 사용하는 방법

Vue 인스턴스에서 글로벌 믹스인 메서드를 사용하는 방법 Global Mixin을 사용하여 Vue를 사용하여 글로벌 도우미 메서드를 작성하는 경우 다음과 같은 상황이 발생한다고 가정합니다. import Vue from "vue"; Vue.mixin({ methods: { replaceString: function (word) { return word.toLowerCase().replace(/\W/g, ''); } } }); let vm = new Vue({ methods: { doSomething: function() { console.log(this.replaceString('Hello World'); //helloword } } }); 다른 메서드, 컴포넌트 및 그 자식 내부에서 메서드를 호출할 수 ..

programing 2022.07.03

vue 2에서 구성 요소의 루트 요소에 대한 이벤트를 테스트하는 방법

vue 2에서 구성 요소의 루트 요소에 대한 이벤트를 테스트하는 방법 다음 컴포넌트에 대한 유닛 테스트를 작성하고 있습니다. 테스트는 다음과 같습니다. import { shallowMount } from '@vue/test-utils'; import _ from 'lodash'; import MyComponent from '../../components/MyComponent'; describe('MyComponent.vue', () => { let wrapper; beforeEach(() => { wrapper = shallowMount(MyComponent); }); it('should emit baz on subcomponent foo', () => { const subComp = wrapper.fi..

programing 2022.07.02

VueCli 3을 사용하여 index.html의 app.js 파일 이름을 변경하는 방법

VueCli 3을 사용하여 index.html의 app.js 파일 이름을 변경하는 방법 VueCli3은 index.html에 app.js를 자동으로 추가합니다.그 app.js 파일의 이름을 바꾸고 싶습니다.그렇게 할 수 있을까요?파일 생성만 하면 됩니다.vue.config.js프로젝트 루트 디렉토리와configureWebpackproperty 출력 js 파일의 이름을 설정할 수 있습니다. vue.config.module module.exports = { configureWebpack: { output: { filename: "appname.js" }, }, } 언급URL : https://stackoverflow.com/questions/54516654/how-to-rename-app-js-file-in..

programing 2022.07.02

Vue: .vue 템플릿에서 pug 언어가 인식되지 않았습니다.

Vue: .vue 템플릿에서 pug 언어가 인식되지 않았습니다. Vue 매뉴얼: pug-loader 등의 대부분의 웹 팩템플릿 로더는 컴파일된HTML 문자열 대신 템플릿 함수를 반환하기 때문에 템플릿 처리 방법은 조금 다릅니다.퍼그 로더를 사용하는 대신 오리지널 퍼그를 설치하면 됩니다. 테스트 컴포넌트vue: div h2 {{ message }} main.filename: import Vue from 'vue' import TestComponent from './../components/TestComponent/TestComponent.vue' new Vue({ el: '#app', render: h => h(TestComponent) }); 오류: NonErrorEmittedError: (Emitted..

programing 2022.07.02

테일윈드 CSS에서 폭 전환은 어떻게 하나요?

테일윈드 CSS에서 폭 전환은 어떻게 하나요? Tailwind 기본 "w-#" 옵션을 사용하여 전환을 시도하면 전환이 적용되지 않습니다.내 수업에서 너비를 하드코드로 만들면 잘 작동합니다.Tailwinds CSS에 뭔가 이상한 점이 있습니까?또한 Tailwinds CSS가 폭에 대응하고 있기 때문에 이 문제가 발생합니까? 여기 HTML 텍스트가 있습니다.여기서의 주요 부분은 버튼을 클릭하면 전환되는 동적 클래스 "sidebarWidth"입니다.모든 전환, 가장 느리고 쉬운 것들이 내가 테일윈드에서 확장한 것들이야. 다음은 Vue 구성 요소의 계산된 속성에 있는 JS 코드입니다. sidebarWidth: function() { if (this.$store.getters.isSidebarCollapsed) ..

programing 2022.07.02

Vee-validate 3.0에서 URL을 검증하는 방법

Vee-validate 3.0에서 URL을 검증하는 방법 URL의 유효성을 확인하는 옵션을 찾을 수 없습니다. vee-validate 3.0에 추가하는 방법 또는 구현 방법은 무엇입니까? 현재 vee-validate를 연장해야 할 것 같습니다. import { ValidationObserver, ValidationProvider, localize, extend as VeeExtend } from 'vee-validate/dist/vee-validate.full'; 그 다음에 뭐랄까 const urlFixRule = (value) => { var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\..

programing 2022.07.02

이거 보세요.$140입니다.set Timeout 푸시

이거 보세요.$140입니다.set Timeout 푸시 랜딩 페이지가 있습니다.'/'사용자가 웹 사이트를 방문하면 5초 동안 로드하고 로그인으로 리다이렉트하고 싶은 로드 휠이 있습니다.'/login'페이지입니다. 저는 Vue와 Bulma.io를 사용하고 있으며 랜딩에서 사용하고 있습니다.가지고 있는 vue 페이지: 라우터/index.js에는 다음이 있습니다. /* Necessary imports...notice I imported the two components we will use( Login and Home) */ import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login' import Home ..

programing 2022.07.02

Axios 매개 변수가 URL에 올바르게 추가되지 않음

Axios 매개 변수가 URL에 올바르게 추가되지 않음 Axios를 사용하여 포스트 리퀘스트에 param을 사용하려고 합니다.그러나 Chrome에서 XHR을 확인해보니 URL에 파라미터가 부가되지 않은 것 같습니다. 이렇게 하면 동작합니다. axios.post('/!/Like/like?id=' + this.id + '&_token=' + this.csrf_token) 하지만 이렇게 하면 다음과 같은 오류가 나타납니다. axios.post('/!/Like/like', { params: { id: this.id, _token: this.csrf_token } }) 즉, URL은 다음과 같아야 합니다. /!/Like/like?id=1234&_token=zYXW-123 내가 뭘 잘못했는지 짐작 가는 거라도 있어..

programing 2022.07.01

Vuetify 폼 검증 - 일치하는 입력을 위한 ES6 규칙 정의

Vuetify 폼 검증 - 일치하는 입력을 위한 ES6 규칙 정의 ES6 & regex를 사용하여 유효한 이메일인지 확인하는 이메일 입력이 포함된 (Vuetify) 폼을 가지고 있습니다.내가 어떻게 다른 것을 셋업할 수 있을까?emailConfirmationRules체크하기 위한 규칙 집합emailConfirmation입력이 일치합니다.email입력하시겠습니까? export default { data () { return { valid: false, email: '', emailConfirmation: '', emailRules: [ (v) => !!v || 'E-mail is required', (v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(..

programing 2022.07.01

Bootstrap-Vue: 요소를 나머지 공간에 채우십시오.

Bootstrap-Vue: 요소를 나머지 공간에 채우십시오. Bootstrap-Vue 애플리케이션에는 다음 계층이 있습니다. 404 Error The page you have requested does not exist. 그요소는 고정된 높이를 가지고 있지 않지만 대신 요소 내부의 요소에 따라 크기가 조정됩니다. 컨테이너의 내용물이 다음 높이를 계산하지 않고 나머지 뷰포트에 채워지도록 할 수 있는 방법이 있습니까?404 텍스트는 항상 남은 공간 가운데에 있도록 수동으로?현재 Navbar를 확장하면 404 텍스트가 뷰포트의 아래쪽 가장자리를 향해 이동합니다.언급URL : https://stackoverflow.com/questions/47691281/bootstrap-vue-make-element-fill..

programing 2022.07.01
반응형