반응형

vuejs2 87

BS4 라디오 버튼 그룹에서 Vue v-model이 반응하지 않음

BS4 라디오 버튼 그룹에서 Vue v-model이 반응하지 않음 너무 오래 보고 있어서 간단한 걸 놓쳤으면 좋겠는데 난감하네요. vuejs에 입력된 양식이 있습니다.저는 "젠더"를 선택하기 위한 두 개의 라디오 버튼을 가지고 있고, 바인딩은 완벽하게 작동합니다.옵션 버튼 중 하나를 클릭하면 vue 컴포넌트인스펙터에서 데이터 변경을 확인할 수 있습니다. 그러나 라디오 버튼을 Bootstrap 4 버튼 그룹으로 변경하려고 하는데 v-model 바인딩이 작동하지 않습니다.버튼 그룹의 버튼 중 하나를 클릭해도 vue 데이터의 gender_id가 업데이트되지 않습니다. 폼 입력 값은 vue 컴포넌트 속성을 통해 입력되지만 간단하게 하기 위해 라디오 버튼/버튼 그룹의 데이터는 다음과 같습니다. export def..

itsource 2022.08.19

Vue.js에서 Foundation 이벤트를 청취하시겠습니까?

Vue.js에서 Foundation 이벤트를 청취하시겠습니까? Vue.js에서 다음과 같은 일반적인 구조를 가진 앱을 구축하고 있습니다. 이를 통해 DOM 상의 모달은 데이터 요소가launchModal(버튼을 클릭하여 모달 부팅 후)가 true로 설정됩니다.이거 잘 되는데 닫으면 반대로 해야 돼요. Foundation의 설명서에 따르면 공개(모달) 컴포넌트는 다음과 같은 이벤트를 내보내야 합니다.closed.zf.reveal닫혔을 때요. 부모 요소(카드 컴포넌트)에서 이 이벤트를 수신한 후 변경하려면 어떻게 해야 합니까?launchModal거짓으로 바꿀 수 있을까요? 감사합니다!요컨대, 이것은 요약하면 다음과 같습니다.modal-component(이것들을 Modal 스크립트에 추가합니다).비디오) met..

itsource 2022.08.19

VueJS | 컴포넌트 내의 라우터 파라미터에 액세스하는 방법

VueJS | 컴포넌트 내의 라우터 파라미터에 액세스하는 방법 Entry 컴포넌트에서 파라미터:id에 액세스하려고 했습니다.소품으로 해봤는데 안 되네.감 잡히는 게 없어요?아무것도 못 찾겠어. export default new Router({ routes: [{ path: '/entry/:id', name: 'Entry', component: Entry }] }) 감사합니다.소주의 답은 맞지만, 저는 '소품을 이용해 공유기를 분리한다'는 의사들의 표현 방식을 사용하는 경향이 있습니다. 이를 위해서는 루트에 true 옵션을 추가하고 컴포넌트에 속성을 정의하면 됩니다. 따라서 경로에서 다음과 같은 것이 있습니다. export default new Router({ routes: [{ path: '/entry/..

itsource 2022.08.19

중첩된 데이터를 사용한 VueJ 입력 바인딩

중첩된 데이터를 사용한 VueJ 입력 바인딩 시나리오에서는 내 상태의 데이터와 뷰에 입력 필드가 몇 개 있습니다.다른 데이터 속성에 의해 결정되는 입력 필드에 바인딩되는 데이터 속성. HTML은 다음과 같습니다. Javascript는 다음과 같습니다. App = new Vue({ el: '#app', data: { d: 'Hello Vue.js!', details: { a: 'aa', b: 'bb', c: { x: 'xx' } }, fields: { one:'a', two: 'b', three: 'c.x' } } }); 보시다시피 '상세' 데이터 속성은 세 개의 입력 필드에 바인딩됩니다.그러나 필드 이름의 세부 정보는 '필드' 데이터 속성에 있습니다.및 의 바인딩은 매우 효과적입니다. 단, c의 상세 데..

itsource 2022.08.17

after 모드: 'history' vue 라우터가 작동하지 않음

after 모드: 'history' vue 라우터가 작동하지 않음 최근에 vuej를 배우기 시작했고, 인증을 위한 Firebase를 사용한 빌드 및 앱도 배웠습니다.웹 팩 테마를 설치하고 링크에 있는 기본 해시태그를 삭제하려고 한 후 문제가 발생했습니다.삽입할 때mode:historyhello 페이지에 로그인해도 리다이렉트 되지 않습니다.떼어내면, 모든 것이 정상적으로 동작합니다. my index.js(my index.js 아래)router폴더): Vue.use(Router) const router = new Router({ mode: 'history', routes: [ { path: '*', redirect: '/login' }, { path: '/', redirect: '/login' }, { pa..

itsource 2022.08.17

요소 UI의 입력 구성 요소와 $ref 사용

요소 UI의 입력 구성 요소와 $ref 사용 사용할 수 있습니까?ref와 함께el-input컴포넌트가 Element-UI에 있나요?사용하려고 합니다.$refsVue 인스턴스를 마운트할 때 입력에 초점을 맞춥니다.코드는 다음과 같습니다. 그리고 Vue의 경우: new Vue({ el: "#app", mounted(){ this.$refs.test.focus() } }) 그focus이동해도 방법이 전혀 작동하지 않습니다.this.$refs.test.focus()이벤트를 통해 트리거를 시도합니다.그$refs오브젝트는 Vue 컴포넌트를 저장하고 있으며 정상적으로 동작하고 있을 것입니다.이 문제는, 유저가, 유저에 대해서focus컴포넌트에는 존재하지 않지만 컴포넌트 템플릿 내의 입력에 존재하는 메서드입니다. 따라..

itsource 2022.08.17

vue.js for loop 내의 함수를 호출하여 현재 항목을 전달하려면 어떻게 해야 합니까?

vue.js for loop 내의 함수를 호출하여 현재 항목을 전달하려면 어떻게 해야 합니까? vue.js 2를 사용하여 for 루프 내에서 현재 반복된 항목이 테스트에 합격했을 경우에만 행을 렌더링해야 합니다. 시험이 복잡해서 간단하다.v-if="item.value == x"안 될 것 같아요 나는 다음과 같은 함수를 작성했다.testIssue아이템을 받아들여 true 또는 false를 반환하고 그것을 사용하려고 합니다.v-if다음과 같습니다. .... var releaseApp = new Vue({ el: '#release-app', methods: { testIssue: function(issue) { console.log(issue); console.log('test'); }, }, mounted:..

itsource 2022.08.17

너비가 다른 임의의 수의 요소를 래핑을 사용하여 그리드에 정렬

너비가 다른 임의의 수의 요소를 래핑을 사용하여 그리드에 정렬 편집 아래 @user943702의 답변을 받았습니다.아래 스니펫과 같이 Vue 구현과 연동하기 위해 약간 수정이 필요했습니다. const theElements = [{ name: "ele1", children: [{ name: 1 }, { name: 2 }, { name: 3 }, { name: 4 }, { name: 5 }] }, { name: "ele2", children: [{ name: 1 }, { name: 2 }, { name: 3 }] }, { name: "ele3", children: [{ name: 1 }, { name: 2 }, { name: 3 }] }, { name: "ele4", children: [{ name: 1 }..

itsource 2022.08.17

vuejs에서 제목 태그를 동적으로 바인딩

vuejs에서 제목 태그를 동적으로 바인딩 저는 vuejs가 처음입니다. 제목 태그의 데이터를 동적으로 바인드하려고 합니다.간단한 html 페이지에서 vue-head를 사용하여 이 작업을 수행했습니다.저는 webpack과 npm을 사용하지 않습니다. 제목 태그를 바인드하는 방법은 다음과 같습니다. var app = new Vue({ el: 'html', head: { title: function () { return { inner: this.remaining + ' Tâches', separator: ' ', complement: ' ' } } } vue-head 매뉴얼에서는 다음과 같이 권장하고 있습니다. methods: { getAsyncData: function () { var self = this..

itsource 2022.08.16

Vuejs 자 컴포넌트 입력과 함께 폼 제출

Vuejs 자 컴포넌트 입력과 함께 폼 제출 입력 필드를 포함하는 자식 구성 요소가 여러 개인 양식 구성 요소인 상위 구성 요소가 있습니다. Submit 자 컴포넌트에는 텍스트필드가 포함되어 있습니다. 다른 아이 컴포넌트에 대해서도 동일하지만 값이 갱신되지 않아 전송할 수 없습니다.다음 코드를 사용해 보십시오. 컴포넌트 내부에서 정의한 소품을 사용해야 합니다.소품 입력에 이름을 붙였습니다. Submit 다른 방법은 입력 컴포넌트를 1개 만들고 사용자 오브젝트에 Atribute를 전달하여 이 컴포넌트를 반복하는 것입니다.v-model값에 바인드된 입력에 직접 액세스합니다.사용자 개체가 루트 뷰 인스턴스에 있는 경우this.$root.whatEver 이 바이올린을 확인해 주세요.https://jsfiddle..

itsource 2022.08.16
반응형