반응형

vuejs2 121

다른 컴포넌트에 입력이 있을 때마다 Vue Prop 검증이 실행됨

다른 컴포넌트에 입력이 있을 때마다 Vue Prop 검증이 실행됨 Vue 컴포넌트는 다음과 같습니다. Male Female 제 메인 앱에서는 다음과 같이 사용하고 있습니다. 제가 직면한 문제는 '검증기'가 처음 페이지를 새로 고쳤을 때 3~4회 실행되며, 그 후에는 같은 페이지에 있는 다른 입력 요소에서 키를 누를 때마다 계속 실행됩니다.참고로 콘솔 출력에 "Validating Male"이 계속 표시되고 "Emitting input"이 콘솔에 표시되는 것은 클릭 시뿐입니다. Vue는 입력 이벤트마다 소품 검증을 반복하고 있습니까?그럴 것 같진 않은데, 내가 뭘 잘못하고 있는 거지? JSFiddle:https://jsfiddle.net/eywraw8t/5090/그건 지극히 정상이에요, 당신은 잘못한 게 없..

source 2022.08.31

수집되지 않은 참조 오류: VM이 vue.js 2.0으로 정의되어 있지 않습니다.

수집되지 않은 참조 오류: VM이 vue.js 2.0으로 정의되어 있지 않습니다. Vue 2.0을 사용 중인데 오류가 발생함 (검출되지 않은 참조 오류: VM이 정의되지 않음) 사용할 때vm.$data또는 콘솔에서 속성을 확인합니다.최신 버전의 vue.js 2.2.4가 있습니다.@Fiete에서 설명한 바와 같이vm변수는 기본적으로 사용할 수 없습니다. 정의해야 합니다.vm콘솔로부터 액세스 할 수 있습니다. 이런 게 효과가 있을 거야 var vm = new Vue({ el: '#app', data: { a: 1 }, router, template: '', components: { App } }); global.vm = vm; //Define your app variable globally 이제 사용할 수 ..

source 2022.08.31

Vue 2 - 스크롤 이벤트 리슨 중

Vue 2 - 스크롤 이벤트 리슨 중 vue 컴포넌트에서 스크롤이벤트를 재생하려고 하는데 이렇게 설정하려고 하면 다음과 같이 됩니다. 그 다음 방법: handleScroll () { const header = document.querySelector('#header'); const content = document.querySelector('#content'); const rect = header.getBoundingClientRect(); const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const headerTop = rect.top + scrollTop; if (rect.top

source 2022.08.31

Vue 템플릿에서 중첩된 개체 속성에 쉽게 액세스할 수 있는 방법이 있습니까?

Vue 템플릿에서 중첩된 개체 속성에 쉽게 액세스할 수 있는 방법이 있습니까? 데이터를 중첩된 개체 속성으로 그룹화하는 것이 편리합니다.이렇게 하면 나중에 사용하기 위해 데이터 필드의 속성을 엔티티에 수집할 필요가 없습니다.다음 예시와 같이 var demo = new Vue({ el: '#demo', data: { level1: { level2: { level3_1: 'Hello', level3_2: 'world' } } } }) {{ level1.level2.level3_1 }} {{ level1.level2.level3_2 }} 단, level3_x 필드에 도달하기 위해 "level1.level2" 프리픽스를 입력해야 하는 것은 매우 오버킬입니다.레벨 3 필드가 로딩되어 있으면 매우 번거롭습니다. l..

source 2022.08.30

조건부 vue-router 로드

조건부 vue-router 로드 다음과 같이 메인 vue 인스턴스에 라우터를 설정합니다. router.syslog: const router = new VueRouter({ routes: [] }); 기본 Vue 인스턴스: import router from '@/router'; window.app = new Vue({ el: '#vue', router, // etc. }); Vue 컴포넌트를 어디에서나 사용하고 있기 때문에 이 Vue 인스턴스가 설정되어 있는 PHP 어플리케이션 내에서 실행하고 있습니다. 라우터는 제가 몇 페이지만 사용하는 거예요.Vue Javascript 라우터를 사용할 수 있도록 하고 싶은 것은 특정 PHP 페이지뿐입니다. PHP 페이지에서도,router-view라우터가 아직 활성화되지..

source 2022.08.30

(VueJ) vue-router가 여러 경로를 일치시킵니다.

(VueJ) vue-router가 여러 경로를 일치시킵니다. vue-router를 사용하고 있으며 매우 다른2개의 경로를 조합하려고 합니다.사용할 수 있는 배열 표기법이 있나요?루트에서 에일리어스를 사용할 수 있습니다. routes: [ { path: '/foo', component: Foo, alias: '/bar'} ] 여기 몇 가지 좋은 예가 있습니다. https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js이를 실현하는 가장 좋은 방법은 다음과 같습니다. { path: '/internalplatforms', alias: ['/a_internalplatforms', '/b_internalplatforms'], name: 'Im..

source 2022.08.30

[Vue warn] :속성 또는 메서드가 인스턴스에서 정의되지 않았지만 렌더링 중에 참조됩니다.

[Vue warn] :속성 또는 메서드가 인스턴스에서 정의되지 않았지만 렌더링 중에 참조됩니다. var MainTable = Vue.extend({ template: "" + "" + "{{index}}) " + "{{set.title}}" + " Info " + "" + "", data: function() { return data; } }); Vue.component("main-table", MainTable); data.settingsSelected = {}; var app = new Vue({ el: "#settings", data: data, methods: { changeSetting: function(index) { data.settingsSelected = data.settings[inde..

source 2022.08.30

Vue JS 체크박스를 바인드하는 방법?

Vue JS 체크박스를 바인드하는 방법? vue js expression을 사용하여 체크박스의 값을 바인드하려면 어떻게 해야 합니까?아래에 filter options 객체의 데이터를 나타냅니다.또, 그 값을 아래 #html1에 바인드 할 수 있습니다. 내가 알고 싶은 것은 체크된 값을 #html1의 drpdown 메뉴에서 선택한 값인 #html2에 바인드하는 방법입니다. html2의 필터에서 볼 수 있듯이 다이내믹하지 않습니다. 감사합니다. html1 {{item}} {{i.value}} {{i.count}} html 2 Filtered By: Year: 2019 Model: Escape Price range: $5000-$10000 Reset Filters 방법 setFilters() { this.fi..

source 2022.08.30

배열을 비교할 때 항목 표시/숨김

배열을 비교할 때 항목 표시/숨김 제 고민은 다음과 같습니다. 나는 가지고 있다.tags체크박스의 목록을 작성하기 위해 루프하는 데 사용되는 배열입니다. 나는 가지고 있다selectTags선택한 태그를 저장합니다.태그가 체크/체크 해제될 때마다 이 배열이 업데이트됩니다. 나는 가지고 있다.images다음과 같이 이미지 URL 및 이미지 태그를 저장하는 객체: days : { day1 : { image1: { url : '', tags: ['tag1', 'tag2'] }, image2: { url : '', tags: ['tag1'] }, }, day2 : { image1: { url : '', tags: ['tag3'] }, image2: { url : '', tags: ['tag1'] }, } } 루프..

source 2022.08.30

vue js의 소품을 사용하여 하위 구성 요소의 속성을 업데이트하려면 어떻게 해야 합니까?

vue js의 소품을 사용하여 하위 구성 요소의 속성을 업데이트하려면 어떻게 해야 합니까? foodList 컴포넌트(부모)에 addToCart 컴포넌트(자녀)가 있습니다.그리고 다른 컴포넌트 Cart가 있습니다.카트를 비울 때마다 addToCart 컴포넌트의 카운터 값을 0으로 리셋하고 싶습니다. App.vue data() { return { msg: "Welcome to Your Food Ordering App", foodData:[], cart:[], reset:false }; }, methods: { emptyCart:function(){ this.reset = true; this.cart = []; } } 음식 목록표시하다 export default { props:['foods','reset'],..

source 2022.08.30
반응형