반응형

vuejs2 417

nuxtjs/pwa와 백그라운드 동기화를 구현하는 방법

nuxtjs/pwa와 백그라운드 동기화를 구현하는 방법 Nuxtjs에서 워크박스 백그라운드 동기화를 사용하려고 하는데@nuxt/pwa-module. 이것은 내 작업함 재산이다.nuxt.config.js파일: workbox: { importScripts : [ 'sw-background-sync.js' ] } 의 내용.plugins/sw-background-sync.js파일: console.log("backsync called") workbox.routing.registerRoute( 'https:\/\/example.com\/api\/Survey\/post.*', new workbox.strategies.NetworkOnly({ plugins: [ new workbox.backgroundSync.Plug..

programing 2022.04.10

Github oauth 콜백 URL이 해시 전에 쿼리 문자열을 추가하는 중

Github oauth 콜백 URL이 해시 전에 쿼리 문자열을 추가하는 중 Vue 프로젝트에서 Oauth(기투브 사용)를 구현하려고 하는데, 기투브에서 콜백 URL이 호출되면 쿼리 문자열이 추가되는 겁니다.?code=somethingurl에서 해시 전에. 예를 들어 로드하는 경우https://myapp.com브라우저에서 내 로그인 링크를 클릭하십시오.Login로 리디렉션됨https://myapp.com/?code=asdfasdf#/something그 뜻은this.$route.query비어 있다. Vue와 Oauth의 신인으로서, 콜백이 호명될 때 어떻게 이 문제를 해결할 수 있을까?https://myapp.com/#/something?code=asdfadsf하도록this.$route.query암호가 들어..

programing 2022.04.10

Vue.js - 객체의 특정 속성 보기 및 변경 시 데이터 로드

Vue.js - 객체의 특정 속성 보기 및 변경 시 데이터 로드 Vue 구성 요소에 소품 이름이 지정되어 있음product, 그것은 많은 속성을 가진 물체다.그리고 그것은 자주 변한다. export default { props: { product: { type: Object, default: () => {}, }, }, watch: { 'product.p1'() { this.loadData() }, 'product.p2'() { this.loadData() }, }, methods: { loadData() { doApiRequest(this.product.p1, this.product.p2) } }, } 속성만 사용할 경우 구성 요소가 새 데이터를 로드해야 함p1그리고p2의 product바뀌었어.한 가지..

programing 2022.04.10

vue 앱에서 다른 앱으로 데이터를 푸시할 수 있는가?

vue 앱에서 다른 앱으로 데이터를 푸시할 수 있는가? 나는 Vue 앱이 두 개 있는 페이지가 있다.나는 페이지에 구글 광고가 나돌고 있고 Vue는 인스턴스 안에 스크립트 태그를 허용하지 않기 때문에 그것들을 결합할 수 없다. 나는 비슷한 것을 사용하는 방법을 원한다.propsApp1에서 App2로 데이터를 푸시하는 방법. 예: 사용자가 App1에서 입력을 작성하면 Vue는 v-model을 통해 데이터를 보존하고 App2로 데이터를 전송한다. App1에 입력된 키워드를 통해 필터링하여 App2에 해당 키워드에 해당하는 Business를 표시하는 데 이것을 사용하고 싶다. 이것이 가능한가? 만약 그렇다면 Vue는 내가 사용할 수 있는 기능이 내장되어 있는가?너는 버스를 이용할 수 있다. const bus ..

programing 2022.04.10

v-for vuejs2의 첫 번째 결과 건너뛰기

v-for vuejs2의 첫 번째 결과 건너뛰기 나는 래러벨 5.5과 부에즈2와 하숙 프로젝트에서 일하고 있다.아래 이미지처럼 결과적으로 먼저 오는 데이터는 건너뛰고 싶다.이건 내 부에즈2 코드야 new Vue({ el:'#users', data:{ message:'', ok:false, noresult:false, arrayresults: [{id:'' ,username: '',useremail: '',userphone:'',}], }, methods:{ searchData: _.debounce(function(){ if(this.message != '') { this.noresult = false; this.arrayresults = [{id:'' ,username: '',useremail: '',u..

programing 2022.04.08

vuej에서 단위 테스트

vuej에서 단위 테스트 나는 Vuejs의 첫 번째 유닛 테스트를 구성/실행하려고 한다.하지만 구성 문제를 지나칠 수가 없어.도서관을 설치해 보았지만 왠지 자꾸 오류가 난다. 내 코드의 예는 다음과 같다. 내 디렉토리 구조: hello/ dist/ node_modules/ src/ components/ hello.vue test/ setup.js test.spec.js .babelrc package.json webpack.config.js 내 파일 안의 내용 src/procks/hello.부에를 하다 {{message}} export default { name: 'hello', data () { return message: 'Hi' }, created () { // ... } } 테스트/테스트.js //..

programing 2022.04.07

Rails 5.1+ Vuejs Webpacker: Normal Rails MVC vs Rails API

Rails 5.1+ Vuejs Webpacker: Normal Rails MVC vs Rails API 나는 Rails 5.1과 Vue.js를 사용하여 웹패커 Vue.js 팩( --webpack=vue 플래그를 통해 생성됨)이 내장된 새로운 앱을 시작하고 있다. 일반 레일즈 MVC 앱 대 레일즈 API 앱(--api 플래그로 레일즈 앱을 생성)을 사용하는 경우의 장단점을 이해하려고 한다. $ rails new someapp --webpack=vue vs. $ rails new someapp --api --webpack=vue 레일즈 API가 2015년부터 핵심으로 통합되고, 웹패커 보석을 통한 빌트인 웹팩이 새롭다는 점(2017년 레일즈 5.1)을 감안하면 프런트엔드가 부에즈인 레일즈 앱을 구축하는 가장..

programing 2022.04.05

Nuxt 2 또는 3에서 .env 변수를 사용하는 방법

Nuxt 2 또는 3에서 .env 변수를 사용하는 방법 프로젝트 루트에 .env 파일이 있으며, nuxt 구성에서 변수를 사용하여 다음과 같이 ReCaptcha를 구성한다. import dotenv from 'dotenv' dotenv.config() export default { modules: [ ['@nuxtjs/recaptcha', { siteKey: process.env.RECAPTCHA_SITE_KEY, version: 3, size: 'compact' }], ] } 다음과 같은 .env에서: RECAPTCHA_SITE_KEY=6L.... 그러나 애플리케이션은 항상 콘솔 로그 오류로 인해 실패함: 다시 캡차 오류:제공된 키 없음 ReCaptcha 키를 직접 하드 코드화할 때:siteKey: 6..

programing 2022.04.03
반응형