반응형

vuejs2 133

재스트를 사용하여 Vue.js 컴포넌트의 메서드를 유닛 테스트하는 방법

재스트를 사용하여 Vue.js 컴포넌트의 메서드를 유닛 테스트하는 방법 구성 요소 방법을 테스트하려고 합니다.여기서의 질문에서는 유닛 테스트에서 컴포넌트 방법에 액세스하는 방법은 설명되지 않습니다. 구체적으로는 아래의 Vue 컴포넌트를 사용하여doSomeWork()내 유닛 테스트에서? Vue 컴포넌트: Some other stuff is going on here 테스트 코드: import {createLocalVue, shallow} from 'vue-test-utils' import ThisVueFile.test.js from '../../thisPlace/ThatPlace/ThisVueFile.vue' import Vuex from 'vuex' const localVue = createLocalVue..

programing 2023.01.31

Vue - 여러 확인란이 있는 입력

Vue - 여러 확인란이 있는 입력 어레이를 기반으로 몇 가지 체크박스를 렌더링하고 데이터 속성을v-modelVue2를 사용하고 있습니다. 하지만, 어떤 이유로든 모든 체크박스를 켜게 되었습니다.v-model1(숫자가 아닌 부울로 취급하는 것 같습니다). 나는 노력했다.v-model.number- 운도 없고요.내가 뭘 잘못하고 있지? 내 템플릿: {{ item.category }} : {{ category.id }} 모델 데이터(item.category): 1 카테고리: [ { "id": 2, "name": "news Category 0" }, { "id": 7, "name": "news Category 1" }, { "id": 12, "name": "news Category 2" }, { "id": 1..

programing 2023.01.31

워치 핸들러 vuejs의 데이터 변수에 액세스할 수 없음

워치 핸들러 vuejs의 데이터 변수에 액세스할 수 없음 VueJs 컴포넌트의 입력 필드에 대한 워치 핸들러 함수의 데이터 변수를 설정하려고 합니다.이런 게 있어요. data() { return { params: { // default params to 1 month from: new Date().setMonth(new Date().getMonth() - 1), to: Date.now(), skip: 0, limit: 100 } } } watch: { dates: { handler: date => { console.log(this.params) if (date.start) { this.params.from = moment(date.start, "YYYY/MM/DD") } if (date.end) { th..

programing 2022.11.17

Jest 및 vue/test-utils를 사용하여 입력 파일을 테스트하는 방법

Jest 및 vue/test-utils를 사용하여 입력 파일을 테스트하는 방법 Jest와 vue/test-utils를 사용하여 파일업로더 컴포넌트를 테스트하고 싶습니다. 이거 있어요. describe('show progress bar of uploading file', () => { const wrapper = mount(FileUploaderComponent) // create csv file let csv = new Blob([''], { type: 'text/csv;charset=utf-8;' }) csv.name = 'myFile.csv' let input = wrapper.find('input') input.element.value = csv // || csv.error value, Error ..

programing 2022.10.18

컬러 앱바가 완전히 흰색 Vuetify로 표시됨

컬러 앱바가 완전히 흰색 Vuetify로 표시됨 다음 코드를 사용하여 Vuetify 앱 바를 로드하려고 합니다. Title search apps refresh more_vert 이 코드를 사용하면 흰색의 빈 앱바가 나타납니다.제목 텍스트를 강조 표시하면 볼 수 있기 때문에 색상도 흰색으로 설정되어 있는 것 같습니다. main.js 파일에 다음과 같은 내용이 있습니다. // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' impor..

programing 2022.10.07

VueJS 동적 속성 이름이 값을 업데이트하지 않음

VueJS 동적 속성 이름이 값을 업데이트하지 않음 연관된 어레이와 값 내의 속성에 액세스하는 방법을 조합하여 구현하려고 합니다. 키는 캠페인 개체의 값을 기반으로 합니다. {{ configuration[campaign._id].value }} https://jsfiddle.net/4yc3bujt/1/ 내가 뭘 놓치고 있는 거야, 정말 짜증나.VueJs 1에서 이 작업을 수행하려고 하면 거의 같은 현상이 발생하지만 두 번 모두 오류가 발생하지 않습니다.이것은, 에서의 반응성의 경고에 의해서 발생하고 있습니다.vue.js. 방금 정의했습니다.configuration: {}초기 데이터에서는요.configuration[key]반응하지 않습니다.반응시키려면 이걸 사용해야 해$set: 개체에 속성을 설정합니다.개..

programing 2022.09.28

VueJs exact-active 클래스

VueJs exact-active 클래스 Router-link를 사용하는 메뉴가 있는데, Router-link가 활성화되었을 때 클래스 "Active"를 "li"로 설정하려고 합니다. {{Name}} "exact-active-class"를 사용하여 클래스를 부모로 설정하는 방법이 있습니까? 감사합니다!사용할 수 있습니다.v-if루트를 체크하고 클래스를 추가합니다.$route.name는somewhere {{Name}} 이를 위한 한 가지 방법은 다음과 같습니다. {{Name}} 그렇지 않으면 부모에게 설정할 수 없습니다.대신 CSS를 적용할 것을 권장합니다.또한 라우터 링크에 태그를 지정할 필요가 없습니다.기본값은 "a"입니다.언급URL : https://stackoverflow.com/questions/..

programing 2022.09.27

i18n의 현재 로케일의 변경을 감시할 수 있는 방법이 있습니까?

i18n의 현재 로케일의 변경을 감시할 수 있는 방법이 있습니까? i18n 사용 중 언어/로케일이 변경되었을 때 함수를 호출하려면 어떻게 해야 하나요? Vuex를 사용해야 합니까, 아니면 vue-i18n을 사용할 수 있는 방법이 있습니까?볼 수 있다$i18n.locale보통 이런 거 많이 바꾸잖아요이러한 요구에 대한 사용 사례는 무엇입니까? watch: { '$i18n.locale': function(newVal, oldVal) { console.log('locale change', newVal) } } / src 디렉토리에 있는 I18n.js 파일: import Vue from "vue"; import VueI18n from "vue-i18n"; Vue.use(VueI18n); // 언어를 변경할 때 ..

programing 2022.09.25

v-on 클릭, 조건이 충족된 경우에만 핸들러 추가

v-on 클릭, 조건이 충족된 경우에만 핸들러 추가 에반 씨의 조사 결과, 다음과 같은 제안이 발견되었습니다.https://github.com/vuejs/vue/issues/7349#issuecomment-354937350 그래서 망설임 없이 시도해 보았다. 컴포넌트 템플릿 ... magic JS 로직 그러나 설명된 경우 렌더링 중 오류가 발생합니다. [Vue warn]: Invalid handler for event "click": got null 어떤 잘못을 했는지 누가 좀 제안해 주시겠어요?: 생각: 갱신하다 그 길Data Model외관: DataModel: { mainSectionA: { sections: { sectionA: { sections: { elementA: { values: { .....

programing 2022.09.08

슬롯 분할 문제를 사용하는 요소 UI 테이블 열 "정의되지 않은 속성 'column_name'을 읽을 수 없습니다"

슬롯 분할 문제를 사용하는 요소 UI 테이블 열 "정의되지 않은 속성 'column_name'을 읽을 수 없습니다" 여기에 요소 UI 프레임워크를 사용하는 사람이 있습니까?https://element.eleme.io/ #/en-US/ 테이블 컴포넌트와 컬럼에 슬롯 스코프를 사용하고 있습니다.물론 패키지를 업데이트 하는 npm 업데이트를 실행할 때까지 정상적으로 동작하고 있습니다.콘솔에는 오류가 많이 있습니다.나중에 테이블 컬럼의 슬롯 스코프가 문제의 원인이라는 것을 알게 되었습니다. 어떤 도움이라도 주시면 감사하겠습니다.여기 그 문제의 요점이 있다. https://jsfiddle.net/japhfortin/jkzma0v8/3/ {{ scope.row.first_name }} data() { return ..

programing 2022.09.08
반응형