본문 바로가기
반응형

VUE13

[vue] SweetAlert2 사용하기. (Utils Class 만들어서 사용하기) 설치 npm install sweetalert2 사용 결과는 아래와 같이 나옵니다. Toast.fire({ icon: 'error', title: 'The current password is incorrect' }) 여기에서 icon 에 들어갈 수 있는 것은 아래와 같습니다. 예제 코드 Swal.fire({ title: 'Are you sure?', text: "You won't be able to revert this!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!' }).then((result) => { .. 2023. 9. 27.
[vue] Composition api 에서 property로 받은 변수 watch 하는 방법 사용하려는 컴포넌트 vue 에서 다음과 같이 props를 사용하고 있을 때, import {useStore} from "vuex"; import {computed, watch} from "vue"; const store = useStore() const props = defineProps({ isDialogVisible: { type: Boolean, required: true, } }) // 생략 isDialogVisible 을 watch 하고 싶다면 watch(isDialogVisible, (newVal, oldVal) => {}) watch(props.isDialogVisible, (newVal, oldVal) => {}) 이 방법들은 안되고 아래와 같이 사용하면 됩니다. watch(()=>prop.. 2023. 9. 10.
[Vue] computed 사용할 때 파라메터 넘기기 아래와 같이 사용하면 됩니다. Hello~ Bryan~ const alertColor = computed(()=>(num) =>{ ... 이 부분이 중요한거 같은데요. computed( (num) => { ... 로 사용하니 안되더라고요. 간단한 조건문 같은 경우는 굳이 computed 를 사용하지 않아도 될거같아요. Hello~ Bryan~ 저는 저 조건문의 변수가 상황에 따라 바뀌고, 경우의 수도 다양해서 computed 를 사용하려고 알아봤습니다. 2023. 9. 10.
[Vue] v-if 와 v-show 의 차이. 사용 시 주의사항. vuejs v-if vs v-show v-if : element가 자체가 있고없고 v-show : element는 있는데 visible on/off 역시. 예제로 보기 v-if export default { computed: { displayByValue: function () { return this.$store.state.myvalue } }, ... mounted: function () { // event binding $('#some_id').click(....); } } - state 의 myvalue값에 따라 를 표시하고 숨기고 하기 위한 코드입니다. - 정상 작동 하는것 처럼 보이지만 치명적인 오류가 있죠. - 처음 화면이 뜨고, state.myvalue 가 true 면 v-if 가 보여지고.. 2021. 6. 7.
[Vue] jQuery 사용하기 #eslint 설정 Vue jQuery 사용하기 jQuery 설치 npm install --save jquery Tip main.js 에서 window.$ = require('jquery') 이렇게 선언하면 window.$('#id') 와 같이 사용할 수 있지만 window.$ 대신 $ 만 쓰고 싶다면 아래와 같이 webpack 에 설정해야하고, eslint 를 사용하고 있다면 여기에도 설정을 해야합니다. Webpack.config.js 에 설정 module.exports = { ... plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery', 'window.jQuery': 'jquery', jQuery: 'jquery' }) ] ... } eslint 를 .. 2021. 1. 15.
[Vue] 화살표함수 (arrow funcion) 사용 시 주의사항 #삽질주의 arrow function 사용 주의 사항 () => {} 결론부터 created: () => console.log(this.a) // 오류. 여기서 this 는 vue instance 가 아닌 window // mounted, udpated, destroyed 마찬가지. methods: { methodA: () => { // arrow function 사용하면 안됨 // this 는 window alert(this == window) // true this.methodB() // 오류 }, methodB: function(){ // this 는 현재 vue instance this.methodA() // 정상 }, methodC() { this.methodA() // 정상 } } 왜? Each Vue .. 2021. 1. 14.
[Vue] Vuetify v-treeview select #programmatically v-treeview select from method 코드로 이해하기. template select all select some unselect js new Vue({ el: '#app', vuetify: new Vuetify(), data(){ return { selectionType: 'leaf', selection: [], items: [ { id: 1, name: 'Root', children: [ { id: 2, name: 'Child #1' }, { id: 3, name: 'Child #2' }, { id: 4, name: 'Child #3', children: [ { id: 5, name: 'Grandchild #1' }, { id: 6, name: 'Grandchild #2' }, ], }.. 2021. 1. 14.
[Vue] vuex actions 에서 다른 action 호출하기 actions 에서 다른 action 호출하기 아래와 같은 소스가 있을 때 method_A 에서 method_B를 호출하는 방법은, const state = { something: '' } const mutations = { setSomething (state, message) { state.something = message } } const actions = { method_A({ commit }) { // method_B 호출 commit('setSomething', 'from method A') }, method_B({ commit }) { // .. do something } } 1. method_A 에 파라메터에 dispatch 추가 2. dispatch 를 이용하여 method_B 호출 me.. 2021. 1. 13.
[Vue] vuex actions 에서 mutation, state 사용하기 actions 에서 mutations 호출하기 예제 소스 코드 const state = { something: '' } const mutations = { setSomething (state, message) { state.something = message } } const actions = { method_A({ commit }) { commit('setSomething', 'from method A') } } actions 의 method_A 라는 메소드에 첫번 째 파라메터를 보면 { } 사이에 commit 을 받고 있습니다. 이걸 이용해서 mutations 을 호출합니다. commit('setSomething', 'from method A') --> setSomething(state, messag.. 2021. 1. 13.
[Vue] router 에서 여러가지 주소 사용하기 #alias search 와 find의 router의 components 가 같습니다. { path: '/search/:text', components: { header: Header, default: MainBody, footer: Footer } }, { path: '/find/:text', components: { header: Header, default: MainBody, footer: Footer } } 두개의 URL을 사용하고, 같은 동작을 해야 한다면 아래의 방법이 관리하기가 더 쉽습니다. { path: '/search/:text', alias: ['/find/:text'], components: { header: Header, default: MainBody, footer: Footer } } ali.. 2021. 1. 12.
728x90
반응형

티스토리툴바