반응형

분류 전체보기 461

Vue 2 - 클릭 이벤트 또는 입력 이벤트에서 실행되었을 때 $emit에서 다른 동작

Vue 2 - 클릭 이벤트 또는 입력 이벤트에서 실행되었을 때 $emit에서 다른 동작 아래 (여기에 fiddle)에서는 아래 클릭 이벤트에서 발생하는 $emit이 예상대로 작동합니다.입력이벤트에 의해 기동된 $emit은 같은 방법으로 배선되어 있습니다만, 부모에게는 $emit가 수신되지 않습니다. {{ message }} {{ otherMessage }} Vue.component('child-comp', { template: 'emitThe input event fired', data: function() { return { inputEventFired: false }; }, methods: { onInput: function(e) { this.inputEventFired = true; this.$em..

programing 2022.08.17

vuex 로그에서 다음 상태와 이전 상태를 숨기는 방법

vuex 로그에서 다음 상태와 이전 상태를 숨기는 방법 vuex를 초기화하는 방법은 다음과 같습니다. Vue.use(Vuex); const store = new Vuex.Store({ plugins: [createLogger({logger: console, collapsed: true})], strict: true, state: state, getters: getters, mutations: mutations, actions: actions, }); Vue.prototype.$store = store; export default store; 취득한 로그는 다음과 같습니다. '변환 ADD_VIDEO_CREDIT @ 15:53:13.903' '%c prev state' '색상: #9E9E9E; 글꼴 무게: ..

programing 2022.08.17

vuex에 저장된 json 데이터 추가 및 읽기

vuex에 저장된 json 데이터 추가 및 읽기 나는 vuex 스토어를 가지고 있고 몇 가지 josn 데이터를 추가하고 있는데 이것이 그 형식이다. [ { "id":1, "firstname": "toto", "lastname": "titi" }, { "id":2, "firstname": "one", "lastname": "two" } ] 클릭 시 동작의 데이터를 추가하고 있으며 이것이 동작 방법입니다. addLink: function() { var dt = '[{"id":1,"firstname":"xx","lastname": "yy"},{"id":2,"firstname": "one","lastname": "two"}]'; this.ADD_LINK(dt) this.newLink = ''; }, 데이터가 스..

programing 2022.08.17

캐시가 없는 VueJs 계산 속성

캐시가 없는 VueJs 계산 속성 입력 필드인 컴포넌트가 있습니다.이 필드는 3개의 케이스를 받아들여 내부 상태(번호)로 변환합니다. 입력: 없음(빈 문자열);상태: 정의되지 않음; 클래스: is-empty; 값: 빈 문자열 입력: 임의의 양수; 상태: 양수; 클래스:; 값: 양수 입력: ; 상태: -1, 클래스: is-unknown, 값: 그렇지 않은 경우:상태: -2; 클래스: is-invalid; 값: 빈 문자열 이 컴포넌트는output내부 상태를 변경하는 세터와 내부 상태를 기준으로 비활성화된 경우 숫자, 대시 또는 빈 문자열 중 하나를 반환하는 getter가 포함된 계산된 속성입니다.필드를 비워두고 싶은 비활성 입력에 대한 특수한 경우입니다. 첫 번째 비활성 문자의 경우 정상적으로 동작하지만 다..

programing 2022.08.17

ES/TS 혼합 프로젝트에서 Vue 구성 요소 사용

ES/TS 혼합 프로젝트에서 Vue 구성 요소 사용 JavaScript와 TypeScript 모두에 Vue 파일을 사용할 수 있도록 하고 싶다.때 태그하다lang설정되지 않았거나 로 설정되어 있지 않다.js그 후 ES2015를 사용하여TypeScript 를 사용합니다.기존 vue+t 프로젝트가 있는데, ES6로 작성된 vue-paper-dashboard 위에 앱을 구축하기로 결정했습니다.컴포넌트를 TS에 보관하고 싶다..vue파일링빈 대시보드 프로젝트로 시작하여 Babel/ESLint를 TS/TSLint로 대체하였습니다.프로젝트가 정상적으로 로딩됩니다.단, vue-paper-dashboard-typescript가 있는 경우.vue내가 설정한 파일다음과 같은 오류가 발생합니다. Module build fa..

programing 2022.08.17

VueX 스토어 필드의 값을 사용하여 컴포넌트를 초기화하려면 어떻게 해야 합니까?

VueX 스토어 필드의 값을 사용하여 컴포넌트를 초기화하려면 어떻게 해야 합니까? A를 Vue 앱에 연결했습니다. 폼에서 필드의 값을 어떻게 처리해야 합니까? 폼이 초기화할 때 스토어의 값을 사용해야 하지만, 그 후 불변 상태의 값을 업데이트하려고 하면 안 됩니다. 사용하기 전에v-model좀 헷갈리네요. 저도 그런 걸 해봤어요. computed: mapState(["profile"]) data() { return { firstname: '', }; }, created() { this.firstname = this.profile.firstname; } 하지만 컴포넌트를 다시 열 때마다 스토어에서 값이 업데이트되지 않습니다. This solution 스토어를 현재 편집 중인 값이 아닌 서버의 값으로 업데이..

programing 2022.08.17

Vuetify 목록 내 VueJs에서 Vuex 스토어에서 상태를 가져오는 방법

Vuetify 목록 내 VueJs에서 Vuex 스토어에서 상태를 가져오는 방법 다음과 같은 Vue 파일이 있습니다. import store from '@/store' export default{ name: 'myList', data: () => ({ show: true, listContent: [{ name: '1', icon: 'person', value: function () { return store.state.myStore.settings.one } }, { name: '2', icon: 'person', value: function () { return store.state.myStore.settings.two } }, { name: '3', icon: 'person', value: functi..

programing 2022.08.17

Vue.js mixin 가져오기가 앱으로 가져오지 않음

Vue.js mixin 가져오기가 앱으로 가져오지 않음 요청된 모듈 './clienteMixin.js'은(는) 'default'라는 이름의 내보내기를 제공하지 않습니다. 믹스인 export const myMixin = { data() { return { loading: false, } } } Vue 앱 import myMixin from './clienteMixin.js' var app = new Vue({ delimiters: ['[[', ']]'], el: '#app', components:{}, mixins: [myMixin], data() { return { } }, methods: { }, mounted () { } }); 먼저 내보내기를 변경하여default내보내기: export default..

programing 2022.08.17

v-card 내부의 bootstrap-vue v-module이 'bootstrap'을 렌더링함

v-card 내부의 bootstrap-vue v-module이 'bootstrap'을 렌더링함 bootstrap-vue를 사용하여 b-tabs 및 기타 컴포넌트를 사용한 작업 예를 보여 줍니다. 단, 한 페이지(.vue)에서는 블록을 태그로 감싸려고 하면 항상 페이지가 카드와 그 내용을 '정의되지 않음'으로 렌더링합니다.여기서 샘플을 사용합니다. v-card가 없는 경우: 그걸 보면 알 수 있어요 코드는 문자 그대로 위의 페이지와 main.ts에서 참조된 샘플에 따릅니다. import {Card} from 'bootstrap-vue/es/components' import { Button } from 'bootstrap-vue/es/components'; import { Collapse } from 'bo..

programing 2022.08.17

커스텀 Laravel Nova 툴에서는 확인 다이얼로그를 어떻게 사용합니까?

커스텀 Laravel Nova 툴에서는 확인 다이얼로그를 어떻게 사용합니까? 내장된 Laravel Nova 확인 다이얼로그를 자신의 툴로 사용할 수 있습니까?제가 사용하고 싶은 것은 Nova가 스스로 작동하는 방식으로 상호작용하는 것입니다. JS 토픽에 관한 문서는 매우 가볍습니다.작업할 수 있는 유일한 UI는 토스트 플러그인인 것 같습니다. 사용할 수 있습니다.컴포넌트를 사용할 수 있습니다. 다음은 Nova에서 내부적으로 작동하는 방법입니다. {{ action.name }} {{ __('Are you sure you want to run this action?') }} {{ __('Cancel') }} {{ __('Run Action') }} 다음으로 간단한 예를 제시하겠습니다. test test {{..

programing 2022.08.17
반응형