prostudy

Vue.js에서의 이메일 검증 나는 Vue와 24시간 동안 일했으니, 무지를 용서해 주세요.여기저기 찾아다니며 가까워지고 있지만, 저의 이해 부족과 기본 원칙이 분명합니다. 버튼을 클릭하면 열리는 모달 기능이 있습니다.이 모달은 전자 메일 입력이 포함된 양식을 표시합니다.그럭저럭 모달은 작동했지만, 이메일을 잘못 입력해도 아무 일도 일어나지 않습니다. 컴포넌트 코드는 다음과 같습니다. Send Me The Tips Step 1 of 2 Email Your Eail To Get Free iPhone Photography Email Tips: {{msg.email}} Send Me The Tips 그게 중요한 거라면 라라벨을 쓸 거야시계를 삭제하고 이벤트청취자를 추가합니다. validate Email 메서드..

VueJs의 동적 컴포넌트에 동적 소품을 결합하는 방법 2 컴포넌트 이름 목록(API 서버에 대한 AJAX 호출에서 가져온 것)을 컴포넌트로 렌더링하고 관련 속성을 각 컴포넌트에 동적으로 바인드하는 방법을 알고 싶습니다. 지금까지 컴포넌트를 나타내는 항목의 JSON 목록을 반복하여 이들 컴포넌트를 정상적으로 렌더링했습니다.이제 각 컴포넌트의 속성을 바인드합니다.v-bind. 다음 예에서는item-one컴포넌트가 수신하다image의 소유물건item1.jpg값 및item-two컴포넌트가 속성을 수신하지 않습니다. 나는 그것을 사용해봤어요.:v-bind="Object.values(Object.keys(item)[0])"하지만 나는 그 속성을 이해한다.v-bind="[object Object]"참조할 수 있습니..

Vue-CLI 구성 요소 오류: 템플릿 컴파일러를 사용할 수 없는 Vue 런타임 전용 빌드를 사용하고 있습니다. VueJs는 처음이고 튜토리얼을 수강하고 있었습니다.다음은 제가 한 단계입니다. VUE CLI를 사용하여 프로젝트 생성 이 코드로 컴포넌트를 작성하려고 했다. var data = { items: [{ text: 'Bananas', checked: true }, { text: 'Apples', checked: false } ], title: 'My Shopping List', newItem: '' }; Vue.component('items-component', { data: function () { return data; }, template: ` sample ` }); App.vue 템플릿 부..

Vue JS가 v-for에서 데이터 전송 버튼 클릭 Vue JS는 처음이라 문제가 좀 있습니다. 배열을 통해 루프하고 있고, div 안에 버튼이 있어 루프하고 있습니다. 아이디어는 클릭 이벤트 후에 지정된 데이터의 데이터를 얻는 것입니다. 예를 들어 이 배열이 있다고 가정해 봅시다.numbers: [1,2,3,4,5]이렇게 루프를 하고 있어요 {{ number }} Get The Value 나는 그렇게 하려고 했다 Get The Value 하지만 나는 오류를 얻었다. 내가 어떻게 그런 결과를 얻을 수 있을까? 다음 항목이어야 합니다. 다음 항목: Get The Value 다음 항목이어야 합니다. Get The Value 그리고 이 방법을 정의해야 합니다. methods: { getTheSelectedOn..

v-show가 소품 작업을 하지 않음 소품을 이용해서 단추를 숨기거나 보여주려고 합니다. 여기 코드가 있습니다. 표시(블레이드) 컴포넌트 템플릿 Save Update 자바스크립트 export default { props: ['showupdatebutton', 'showsavebutton', 'modalid'] } 두 가지 포인트: 그props당신이 지나가고 있다고 그들이 생각하는 방식으로 일하지 마세요. 컴포넌트에 데이터 변수(또는 소품)를 작성하려면 에서 사용하는 이름을 사용해야 합니다.v-show. 패싱 소품 다음과 같은 경우: 컴포넌트 내에서savebutton그리고.updatebutton속성은 문자열이 됩니다.위의 예에서는 부울이 아닙니다.false, 그것들은 문자열이 됩니다."false". 다른 ..

Vuetify.js 2 - babel-polyfill을 사용하면 데이터 테이블 바닥글이 올바르게 표시되지 않음 Vuetify.js 2.0.10의 데이터 테이블을 사용하고 있습니다.바닥글이 IE11에서 아래처럼 올바르게 표시되지 않습니다. 나는 이 서류를 읽었다.https://vuetifyjs.com/en/getting-started/quick-start#ie-11-safari-9-support babel-polyfill과 @/babel/preset-env를 설치하고 babel.config.js와 vue.config.js를 bellow와 같이 설정했습니다. 패키지.json { "name": "table-test", "version": "0.1.0", "private": true, ... "dependenc..

Vue 구성 요소의 조건부 루트 태그 나의 질문 다음과 같은 컨텐츠를 렌더링하는 Vue 컴포넌트가 있습니다. {{ title }} {{ contents }} 의 내용에 주의해 주세요.div... 경우에 따라서는, 나는 바꿀 필요가 있다.로.이 점을 염두에 두고 태그를 조건부로 변경할 수 있는 방법이 있습니까(예:a,div)는 Vue 컴포넌트의 루트 요소에 대응하고 있습니까? 조사. 인터넷을 검색해 본 결과, 사용 방법에 대해 알 수 있었습니다.render다음과 같이 기능합니다. render (createElement) { return createElement(this.tag, {}, this.$slots.default); } 위의 문제는 예를 들어 2개의 개별 컴포넌트가 필요하다는 것입니다.Item.vu..

계산된 속성 Vue.js에서 데이터에 액세스하는 방법 Vue.js를 사용하고 있으며 계산된 속성 내의 데이터에서 변수에 액세스하려고 하면 Vue.js가 반환됩니다.undefined코드는 다음과 같습니다. 이것은 NPM 프로젝트 중 하나입니다.그리고 그 안에.vue파일입니다. 이렇게 사용하면 다르게 동작하지 않을까요? 도와 주셔서 감사해요.이것은 매우 일반적인 "gotcha"입니다. 계산을 정의할 때는 굵은 화살표를 사용하지 마십시오. 두꺼운 화살표를 사용하여 계산, 메서드 또는 데이터를 정의할 때 캡처합니다.this어휘적으로, 그리고 그것은 포함 범위를 가리킬 것이다.window또는 정의되지 않음)을 선택합니다. 언급URL : https://stackoverflow.com/questions/4286866..

Vue.js - 동적으로 생성한 정의되지 않은 img 소스 변경 vue js와 서드파티 API를 가지고 놀고 있습니다.나는 성공적으로 를 취득했다.jsonhtml에 데이터를 표시하지만 이미지 처리에 어려움을 겪고 있습니다.에서 일부 이미지가 누락되었습니다.json파일을 만들어서 노트북에 로컬로 저장해놨어요. html에서 v-if를 사용하여 빈 이미지 소스를 설정하려고 했지만 실패하였습니다.(html 파일의 코멘트를 참조해 주세요. 또한 나는 모든 수업의 배정을 시도했다.img그리고 나서 나는 세팅하려고 했다.imgjquery를 사용한 소스$("#zTTWa2").attr("src", "missing_beers-logo/11.5%20plato.png");운도 없고요. 내 잘못은 어디에 있지?코딩에 익숙하지 ..

다른 Vue 프로젝트 내에서 Vue 웹 컴포넌트(Vue-CLI 3에서 생성)를 사용하는 방법 Vue-CLI 3 build 명령으로 생성된 웹 구성 요소를 사용할 수 있습니다(vue-cli-service build --target wc --name foo ./src/App.vue)는 다음과 같은 웹 페이지에서 독립 실행형 구성 요소로 사용됩니다. 그러나 이 컴포넌트를 다른 Vue 프로젝트 내에 Import할 경우: import Vue from 'vue' import foo from 'foo' 다음 오류가 발생: Uncaught ReferenceError: Vue is not defined Vue CLI 3 매뉴얼에는 다음과 같이 기재되어 있습니다. 웹 구성 요소 모드에서는 Vue가 외부화됩니다.즉, 코드가..