반응형

vuejs2 77

vue.js 응용 프로그램의 정적 자산에 대한 경로

vue.js 응용 프로그램의 정적 자산에 대한 경로 vue-cli 웹 팩 템플릿을 기반으로 단일 페이지 애플리케이션을 개발하고 있습니다.정적 자산도 사용해야 하므로 스타일시트에서 참조해야 합니다. 공식 문서에서는 다음과 같은 절대 경로를 사용할 것을 권장합니다. background-image: url('/assets/images/lo/example2.svg'); 문제는 정적 자산이 vue-loader 및 웹 팩 자체에 의해 처리되지 않기 때문에 최종 출력 스타일시트에서 URL이 올바르게 설정되지 않는다는 것입니다.webpack url-loader에 의해 처리되는 모든 자산은 publicPath 설정에 따라 올바른 상대 URL을 가져옵니다.스태틱 에셋에서도 같은 효과가 요구됩니다. 정적 자산을 vue.js..

source 2022.09.04

Vue 컴포넌트를 외부 프로젝트에 공개하다

Vue 컴포넌트를 외부 프로젝트에 공개하다 NPM에 공개하지 않고 Vue 컴포넌트를 다른 프로젝트에 공개하는 방법을 검토 중입니다. Vue 컴포넌트를 NPM에 퍼블리시하는 방법을 나타내는 다음 링크를 찾을 수 있습니다:how-to-your-vue-js-component-on-npm-62b67dfb3e58 하지만 나는 NPM에 게시하고 싶지 않다.대신 생성된 컴포넌트를 다른 로컬프로젝트에 사용하고 싶습니다.개인 저장소를 사용할 수 있습니다.package.json 그래서 도서관은.vue구성 요소들 { "name": "my-package-with-components", "version": "1.0.0", "files": [ "lib/js/components/**.vue" ] } 이러한 구성 요소를 사용할 프로..

source 2022.09.04

v-model에서 getter setter를 어떻게 사용합니까?

v-model에서 getter setter를 어떻게 사용합니까? {{ msg }} jsfiddle로 달리다 v-model에서 getter setter를 어떻게 사용합니까?v-model에서 getter와 setter를 사용하려고 했지만 작동하지 않았습니다. getters와 setters는 그대로 괜찮습니다.(이 예에서는 사용자 입력을 수정하는 작업이 없기 때문에 반드시 필요한 것은 아닙니다만, 질문의 목적을 위해 단순화한 것이라고 생각합니다.) 코드에는 다음 두 가지 문제가 있습니다. 입력 필드가 Vue 루트 노드 외부에 있으므로 프레임워크에서 볼 수 없습니다.[이 문제를 늦게 수정했습니다] 데이터의 정의(A.aVue의 외부이므로 프레임워크는 변경을 감시할 수 없습니다. 프레임워크가 변경에 대응하려면 변수..

source 2022.09.04

Vuetify와 Laravel과 어떻게 결합합니까?

Vuetify와 Laravel과 어떻게 결합합니까? 안녕히 주무세요. Vuetify와 Laravel과 함께 서버 측 페이징을 하려고 합니다. 하지만 Vuetify가 제공한 방법은 제대로 작동하지 않았습니다.Vuetify 컴포넌트로 구현하고 싶은 페이지가 있습니다. 간단한 부트스트랩으로 만든 코드를 첨부합니다. thumb_down thumb_down 페이지 투 서버 방법: methods:{ get(page, search){ let url = `http://127.0.0.1:8000/api/articles?page=${page}&search=${search}`; axios.get(url) .then( response => { let res = response.data this.products = res.ar..

source 2022.09.03

소품 및 데이터 중복을 방지하려면 어떻게 해야 합니까?

소품 및 데이터 중복을 방지하려면 어떻게 해야 합니까? 저는 Vue는 처음이지만 Google Polymer 2를 1년 정도 사용한 경험이 있습니다.제가 달성하려고 하는 것은 자체 가변 내부 상태를 가진 자기 완결형 컴포넌트를 구축하고, 페이지가 서버에서 브라우저로 처음 전송될 때 HTML을 통해 초기 상태로 전달하는 것입니다(즉, 단일 페이지 앱이 아닙니다).며칠 동안 소품이나 데이터를 만지작거렸습니다만, 소품을 사용하여 초기값을 전달하고 데이터 필드에 복사한 다음 데이터 필드를 변환하는 것이 합의된 것 같습니다. 하지만 이로 인해 가치가 중복됩니다!"title" 값이 있는 경우, 컴포넌트 내에서 타이틀의 변환을 자급자족하려면 해당 값에 대한 프로포트와 데이터가 모두 필요합니다(입력된 값을 먼저 처리해야..

source 2022.09.03

javascript에서 . (dot)를 숫자와 연결하는 방법

javascript에서 . (dot)를 숫자와 연결하는 방법 hi i는 html을 사용하여 시각적인 계산을 만들었습니다. 그리고 그것의 모양은 다음과 같습니다. | 1 | 2 | 3 | | 4 | 5 | 6 | | 7 | 8 | 9 | | | . | | 라고 하는 기능을 만들었습니다.number()각 html 요소를 클릭하면 바로 이것입니다. number(number) { this.total_quantity_discount_price = this.total_quantity_discount_price+''+number; this.total_quantity_discount_price = parseFloat(this.total_quantity_discount_price); }, 숫자와 함께0123456789모..

source 2022.09.01

Vue 구성 요소를 테스트할 때 측면 플러그인을 시뮬레이션하는 방법

Vue 구성 요소를 테스트할 때 측면 플러그인을 시뮬레이션하는 방법 나는 Vue 2, vue-test-utils, joke를 사용한다. 플러그인은 사진을 업로드하기 위한 vue-croppa입니다. import Croppa from 'vue-croppa' Vue.use(Croppa, { componentName: 'image-croppa' }) v-model을 통해 구성 요소에 마운트됩니다.그럼 몇 가지 방법을 불러올 수 있겠네요. 템플릿 대본 data() { return { myCroppa: {}, } }, 또한 vue-croppa 메서드라고 하는 메서드가 있습니다. handlePicture(){ const dataUri = this.myCroppa.generateDataUrl() this.$emit('..

source 2022.09.01

잘못된 소품: 소품에 대한 형식 검사에 실패했습니다.

잘못된 소품: 소품에 대한 형식 검사에 실패했습니다. Vue.js를 사용하여 카운트다운을 작성했지만 현재 값을 표시하는 데 어려움을 겪고 있습니다.컴포넌트가 2개 있고 Vue에서 파일 컴포넌트 가이드를 1개 읽었는데 제가 뭘 잘못하고 있는지 잘 모르겠어요.콘솔에 다음 오류가 나타납니다. [Vue warn] :잘못된 소품: 소품 "날짜"에 대한 형식 검사에 실패했습니다.예상 번호입니다. 문자열이 있습니다. 내 코드에는 숫자로 정의되어 있지만. app.module import './bootstrap.js'; import Echo from 'laravel-echo'; import Vue from 'vue'; import CurrentTime from './components/CurrentTime'; impor..

source 2022.09.01

vue-multicelect가 CSS를 로드하지 않음

vue-multicelect가 CSS를 로드하지 않음 vue-multicelect 컴포넌트(b15)를 vue-cli(웹팩 템플릿)와 함께 사용하고 있지만 컴포넌트의 CSS가 로드되지 않고 컴포넌트가 잘못 렌더링됩니다.감 잡히는 게 없어요? 내 코드: 멀티 셀렉트가 렌더링되어 모든 것이 스타일 없이 적용됩니다.마지막에 css를 따로 추가해야 하기 때문에 다음과 같이 파일을 작성할 수 있습니다. 언급URL : https://stackoverflow.com/questions/42887724/vue-multiselect-does-not-load-css

source 2022.09.01

Vue .splice()가 항상 마지막 항목을 제거하는 이유

Vue .splice()가 항상 마지막 항목을 제거하는 이유 업데이트: 이제 작동 중입니다.제가 뭘 했는지 잘 모르겠어요. 솔직히 아무것도 바꾼 기억이 없지만, 피드백 때문인 것 같아요. 그래서 도와준 모든 분들께 감사드립니다. 배열 내의 객체를 기반으로 테이블 행을 생성하는 루프가 있습니다.제거할 행을 트리거할 때마다 제거할 행은 항상 배열의 마지막 항목입니다. 데이터 - "회의 계획"으로 저장 [ { dow:"-T-R---", endTime:"11:45:00", startTime:"08:45:00" }, { dow:"--W----", endTime:"12:45:00", startTime:"10:45:00" }, { dow:"----F--", endTime:"15:00:00", startTime:"14..

source 2022.08.30
반응형