반응형

Vue 49

Vue2에서 디바운스를 구현하는 방법?

Vue2에서 디바운스를 구현하는 방법? 나는 Vue 템플릿에 간단한 입력란을 가지고 있는데, 나는 디바운스를 거의 이와 같이 사용하고 싶다. 하지만, 그debounceVue 2에서는 속성이 더 이상 사용되지 않았다.권장 사항에는 "v-on:input + 타사 디바운스 기능 사용"이라고만 나와 있다. 어떻게 그것을 올바르게 구현하는가? lodash, v-on:input, v-model을 사용하여 구현해 보았지만 추가 변수 없이 구현이 가능한지 궁금하다. 템플릿: 스크립트에서: data: function () { return { searchInput: '', filterKey: '' } }, methods: { debounceInput: _.debounce(function () { this.filterKey..

Programing 2022.03.28

하위 구성 요소에서 상위 데이터 업데이트

하위 구성 요소에서 상위 데이터 업데이트 나는 부에즈(2.0)를 가지고 놀기 시작했다.나는 하나의 구성요소가 들어 있는 간단한 페이지를 만들었다.페이지에는 데이터가 포함된 Vue 인스턴스가 하나 있다.그 페이지에서 나는 html에 구성요소를 등록하고 추가했다.구성 요소가 하나 있음input[type=text]그이 부모 인스턴스)에 나는 그 값이 부모(메인 Vue 인스턴스)에 반영되기를 원한다. 구성 요소의 상위 데이터를 올바르게 업데이트하는 방법부모로부터 바운드된 소품을 건네는 것은 좋지 않고 콘솔에 약간의 경고를 던진다.그들은 의사록에 뭔가가 있지만 그것은 효과가 없다.양방향 바인딩은 Vue 2.0에서 더 이벤트 중심 아키텍처의 사용을 위해 더 이상 사용되지 않았다.일반적으로 어린이는 그 소품을 변이해..

Programing 2022.03.28

Vue.js의 URL에서 쿼리 매개 변수를 가져오는 방법

Vue.js의 URL에서 쿼리 매개 변수를 가져오는 방법 Vue.js에서 쿼리 매개 변수를 가져오는 방법 예시http://somesite.com?test=yay. 가져올 방법을 찾을 수 없거나 순수 JS 또는 라이브러리를 사용해야 하는가?경로 개체의 문서에 따르면$route필요한 것을 노출하는 구성 요소로부터 객체.이 경우 //from your component console.log(this.$route.query.test) // outputs 'yay' vue-route 없이 URL을 분할 var vm = new Vue({ .... created() { let uri = window.location.href.split('?'); if(uri.length == 2) { let vars = uri[1].s..

Programing 2022.03.27

Vue2에서 디바운스를 구현하는 방법?

Vue2에서 디바운스를 구현하는 방법? 나는 Vue 템플릿에 간단한 입력란을 가지고 있는데, 나는 디바운스를 거의 이와 같이 사용하고 싶다. 하지만, 그debounceVue 2에서는 속성이 더 이상 사용되지 않았다.권장 사항에는 "v-on:input + 타사 디바운스 기능 사용"이라고만 나와 있다. 어떻게 그것을 올바르게 구현하는가? lodash, v-on:input, v-model을 사용하여 구현해 보았지만 추가 변수 없이 구현이 가능한지 궁금하다. 템플릿: 스크립트에서: data: function () { return { searchInput: '', filterKey: '' } }, methods: { debounceInput: _.debounce(function () { this.filterKey..

Programing 2022.03.27

Vue-Router를 사용하여 Vue에서 URL 쿼리 매개 변수를 설정하는 방법

Vue-Router를 사용하여 Vue에서 URL 쿼리 매개 변수를 설정하는 방법 입력 필드를 변경할 때 Vue-router를 사용하여 쿼리 매개 변수를 설정하려고 하는데 다른 페이지로 이동하지 않고 같은 페이지에서 URL 쿼리 매개 변수를 수정하고 싶어서 이렇게 하고 있다. this.$router.replace({ query: { q1: "q1" } }) 그러나 이렇게 하면 페이지가 새로 고쳐지고 y 위치가 0으로 설정되며, 즉 페이지 맨 위로 스크롤된다.이것이 URL 쿼리 매개 변수를 설정하는 올바른 방법인가 아니면 더 나은 방법이 있는가? 편집됨: 다음은 내 라우터 코드: export default new Router({ mode: 'history', scrollBehavior: (to, from, ..

Programing 2022.03.26

각각은 JavaScript 배열의 함수 오류가 아님

각각은 JavaScript 배열의 함수 오류가 아님 난 간단한 루프를 만들려고 한다. const parent = this.el.parentElement console.log(parent.children) parent.children.forEach(child => { console.log(child) }) 그러나 나는 다음과 같은 오류를 얻는다. VM384:53 Uncaused TypeError: parent.children.각자는 함수가 아님 그럼에도 불구하고.parent.children로그: 뭐가 문제야? 주: 여기 JSFiddle이 있다.첫 번째 옵션: 각각에 대해 간접 호출 그parent.children배열과 같은 객체.다음 솔루션을 사용하십시오. const parent = this.el.paren..

Programing 2022.03.25

@click과 v-on의 차이:Vuejs 클릭

@click과 v-on의 차이:Vuejs 클릭 질문은 충분히 명확해야 한다. 하지만 나는 누군가가 다음을 사용한다는 것을 알 수 있다. press 다른 사용자가 사용: press 그러나 정말로 그 둘의 차이점은 무엇인가 (존재한다면)둘 사이에는 차이가 없고, 하나는 두 번째의 속기에 불과하다. v- 접두사는 템플릿에서 Vue 관련 특성을 식별하는 시각적 신호 역할을 한다.이는 기존 마크업(markup)에 동적 동작을 적용하기 위해 Vue.js를 사용할 때 유용하지만 자주 사용되는 일부 지시사항에 대해 장황하게 느낄 수 있다.동시에 Vue.js가 모든 템플릿을 관리하는 SPA를 구축할 때 v- 접두사의 필요성이 줄어들게 된다. 출처: 공식 문서.v-bind그리고v-onvuejs html 템플릿에서 자주 사..

Programing 2022.03.25

외부 JS 스크립트를 VueJS 구성 요소에 추가하는 방법

외부 JS 스크립트를 VueJS 구성 요소에 추가하는 방법 나는 결제 게이트웨이에 외부 대본을 두 개 사용해야 해. 지금 현재 두 개 모두 그 안에 있다.index.html파일 하지만, 나는 이 파일들을 처음부터 로드하고 싶지 않다. 사용자가 특정 구성요소를 열 때만 지불 게이트웨이가 필요함(using router-view). 이것을 성취할 방법이 있을까? 고마워요.이 문제를 해결하는 간단하고 효과적인 방법은 외부 스크립트를 vue에 추가하는 것이다.mounted()당신의 구성 요소의구글 Retrifcha 스크립트로 설명하겠다. .... your HTML 출처: https://medium.com/@lassiuosukainen/how-to-to-to-tog-a-script-tag-on-a-vue-compo..

Programing 2022.03.25

구성 요소 외부에서 Vue.js 구성 요소 메서드를 호출하십시오.

구성 요소 외부에서 Vue.js 구성 요소 메서드를 호출하십시오. 예를 들어, 하위 구성 요소를 포함하는 기본 Vue 인스턴스가 있다고 합시다.이러한 구성 요소 중 하나에 속하는 방법을 Vue 인스턴스 외부에서 전체적으로 호출하는 방법이 있는가? 예를 들면 다음과 같다. var vm = new Vue({ el: '#app', components: { 'my-component': { template: '#my-template', data: function() { return { count: 1, }; }, methods: { increaseCount: function() { this.count++; } } }, } }); $('#external-button').click(function() { vm['my..

Programing 2022.03.24

조건부로 입력 비활성화(Vue.js)

조건부로 입력 비활성화(Vue.js) 할 말이 있다: 내 Vue.js 구성 요소에는 다음과 같은 것들이 있다. .. .. ready() { this.form.name = this.store.name; this.form.validated = this.store.validated; }, .. validated한 사람으로서boolean, 그것은 둘 중 하나일 수 있다.0또는1그러나 어떤 값이 데이터베이스에 저장되든 내 입력은 항상 비활성화되어 있다. 다음과 같은 경우 입력을 비활성화해야 한다.false, 그렇지 않으면 활성화 및 편집 가능해야 한다. 업데이트: 이렇게 하면 항상 입력이 활성화된다(데이터베이스에 0 또는 1이 있더라도): 이 작업을 수행하면 항상 입력이 비활성화됨(데이터베이스에 0 또는 1이 있..

Programing 2022.03.23
반응형