VUE.JS

vue

동일한 페이지에서 각 앱 인스턴스에 대해 개별 스토어를 사용하는 방법

매우 복잡한 VueJS2 어플리케이션을 사용하고 있으며 vuex 스토어를 사용하고 있습니다. 지금까지는 모든 것이 완벽하게 작동했다.이제 한 페이지에서 여러 인스턴스를 지원하도록 애플리케이션을 변경해야 합니다.동적이어야 합니다. 즉, 고객은 필요한 HTML 코드를 추가하는 것만으로 원하는 만큼의 인스턴스를 삽입할 수 있어야 합니다.이미 https://www.npmjs.com/package/vue-custom-element을 사용하고 있기 때문에 가능합니다. 물론 가장 큰 문제는 Vuex입니다. 충분히 이해할 수 있는 것은 한 가지뿐입니다.또한 …

동일한 페이지에서 각 앱 인스턴스에 대해 개별 스토어를 사용하는 방법 더 보기 »

Vue를 사용하여 하위 입력 구성 요소에 참조를 전달하려면 어떻게 해야 합니까?

현재 제출 시 입력값(기본 입력 컴포넌트)을 얻기 위해 참조를 전달하려고 합니다.아래 두 가지 구성 요소를 찾을 수 있습니다.console.log in handleSubmit에서는 e-메일이 항상 정의되지 않습니다. 잘 부탁드립니다. 상위 컴포넌트 <template> <form @submit.prevent=”handleSubmit”> <div class=”flex flex-col mt-10″> <form-label forInput=”email” label=”Email Address” /> <base-input type=”email” name=”email” ref=”email” /> </div> </form> </template> <script> import BaseInput from “../UI/BaseInput.vue”; export default …

Vue를 사용하여 하위 입력 구성 요소에 참조를 전달하려면 어떻게 해야 합니까? 더 보기 »

vite + vue TypeError: 정의되지 않은 속성을 읽을 수 없습니다(‘checkedNumbers’ 읽기).

마이템플릿 <script setup> import { computed, ref, watch } from “vue”; let checkedNumbers = ref([]); function sum(){ return this.checkedNumbers.reduce(function (a, b) { return parseFloat(a)+ parseFloat(b); },0); } <span id=”prixSum” class=”sm:text-center lg:text-left block font-bold text-sky-500 text-xl font-semibold lg:text-left”> {{ prixSum = sum()== 0 ? model.prixS1 : parseFloat(sum()+ model.prixS1).toFixed(2) }} </span> <ul> <li> <span class=”px-5 py-3 font-semibold …

vite + vue TypeError: 정의되지 않은 속성을 읽을 수 없습니다(‘checkedNumbers’ 읽기). 더 보기 »

오류에 대한 도움말 필요: nuxt-stripejs: publishableKey 필요

VueJs 및 NuxTJs에서 개발된 로컬호스트에 프로젝트를 셋업하고 있으며 백엔드는 라라벨(API)로 되어 있습니다.Laravel의 셋업은 정상적으로 완료되었지만 프런트(vueJs 및 NuxtJs)는 에러에 의한 것입니다..env.dev 파일을 업데이트하고 모든 필수 종속성을 가진 노드를 설치했지만 여전히 동일한 문제에 직면해 있습니다.스트라이프 키까지 바꿨는데 아직도 안 돼요. 누가 그 문제를 조사하고 나를 도와줄 수 있나요? PROD_API_URL=http://api..com/api DEV_API_URL=http://api..test:8000/api STRIPE_PUBLISHABLE_KEY=syslog_test_********* 로컬 호스트에서 프로젝트를 설정할 때 …

오류에 대한 도움말 필요: nuxt-stripejs: publishableKey 필요 더 보기 »

Vue.js v-for에서 사용할 어레이에서 Axios를 저장하는 방법

문제는 Vue.js에서 Axios 응답을 사용하는 것입니다.데이터가 어레이에 저장되지 않은 것 같습니다(newBox). API에서 반환된 값을 배열에 저장하여 사용할 수 있도록 합니다.v-for컴포넌트 내에 있습니다. <script setup> import { RouterLink, RouterView } from ‘vue-router’; import { onMounted, onUnmounted } from ‘vue’ import Box from ‘./components/Box.vue’; import axios from “axios” import { propsToAttrMap } from ‘@vue/shared’; var newBox = …

Vue.js v-for에서 사용할 어레이에서 Axios를 저장하는 방법 더 보기 »

Vue js의 하위 컴포넌트의 소품에서 계산된 것을 호출할 수 있습니까?

자녀 구성 요소와 아버지 구성 요소가 있습니다.하위 구성요소에 잘못된 기본값을 가진 부울 소품이 있습니다.부모 컴포넌트의 component child를 호출하여 boolean 값을 반환하는 계산함수로 자녀 컴포넌트를 설정했을 때 오류가 발생하였습니다.자성분 <template> <div v-if=”fruitDisplay”> <span >{{ fruitName }}</span> </div> </template> <script> export default { name: “childComponent”, props: { fruitDisplay: { type: Boolean, default: false } }, data() { …

Vue js의 하위 컴포넌트의 소품에서 계산된 것을 호출할 수 있습니까? 더 보기 »

javascript 파일의 axios post 메서드를 vue로 내보내려면 어떻게 해야 합니까?

javascript 파일에서 api에서 얻은 데이터를 내보내고 vue 파일에 표시하는 데 문제가 있습니다. post 방식으로 security json을 서버로 보냅니다.콘솔 로그와 함께 출력이 표시되지만 출력하지 않고 vue 파일의 데이터를 표시하려고 합니다. 저는 이런 걸 해봤어요 data AdvancedTable.js import axios from “axios”; const data = JSON.stringify({ “guvenlik_bir”: 111, “guvenlik_iki”: 111111 }); const config = { method: ‘post’, url: …

javascript 파일의 axios post 메서드를 vue로 내보내려면 어떻게 해야 합니까? 더 보기 »

vue.debug에서 전체 페이지를 사용하는 방법

안녕하세요. vue.http를 사용하여 “full page.http”가 필요한데 vue3에서만 지원됩니다. vue.full page를 어떻게 사용할 수 있습니까? 아니면 순수 JS를 어떻게 사용할 수 있습니까? (https://alvarotrigo.com/fullPage/) 지금까지의 코드로 작성된 스크립트를 다음에 나타냅니다. <script> import Bio from “../components/Bio.vue”; import Counter from “../components/Counter.vue”; import Gallery from “../components/Gallery.vue”; import About from “../components/About.vue”; import Clients from “../components/Clients.vue”; import Clientslogo from “../components/Clientslogo.vue”; import Services …

vue.debug에서 전체 페이지를 사용하는 방법 더 보기 »

여러 구성 요소를 가져오면 오류 발생(Nuxt/Vue)

특정 디렉토리 내에 여러 구성 요소를 가져오고 있으며 가져올 때 각 구성 요소를 지정하지 않고 이 구성 요소를 사용하려고 합니다.이 작업을 수행하려면 다음과 같이 문제의 컴포넌트 디렉토리에 index.js 파일을 저장합니다. import Component1 from ‘./Component1’ import Component2 from ‘./Component2’ export default { Component1, Component2 } 그런 다음 다음 다음 작업을 수행하여 다음 구성요소를 페이지 구성요소/템플릿으로 가져옵니다. …

여러 구성 요소를 가져오면 오류 발생(Nuxt/Vue) 더 보기 »

Vue 컴포넌트를 테이블의 행에 로드하는 방법

제 할 일이 적힌 테이블이 있어요.마지막 칸에는 ‘완료’라고 표기하는 버튼이 있습니다.다른 테이블 및 보기에서 이 단추를 다시 사용하고 싶기 때문에 가져오는 구성 요소로 추가했습니다. 또한 다음과 같은 테이블 패키지를 사용하고 싶습니다.vue3-table-lite1) 필터링, 2) 페이지 번호부여, 3) 정렬 기능에 빠르고 쉽게 접근할 수 있도록 합니다. 이러한 패키지는 일반적으로:rows텍스트만 있는 경우 매우 간단합니다.단, 이 경우 Vue 컴포넌트를 …

Vue 컴포넌트를 테이블의 행에 로드하는 방법 더 보기 »

장치 테스트 실행 시 “Cannot use import statement outside a module error” 오류가 발생합니다.

나는 에 부딪치고 있다.SyntaxError: Cannot use import statement outside a modulevue 2 / joke 유닛 테스트를 실행하려고 할 때 오류가 발생했습니다.이것을 jest.config에 추가했는데도 오류가 발생하였습니다.ckeditor가 내부적으로 코드를 Import하려고 하는 것 같습니다만, 장난이 번져도 잡히지 않습니다. import { Editor, DataApiMixin, ElementApiMixin, attachToForm } from ‘ckeditor5/src/core’; transformIgnorePatterns: [ ‘\\/node_modules\\/(?!@ckeditor).+\.(js jsx ts tsx vue)$’], 나는 이 솔루션과 비슷한 …

장치 테스트 실행 시 “Cannot use import statement outside a module error” 오류가 발생합니다. 더 보기 »

오류: ‘등록’ 유형에 속성이 없습니다.ts(2339)

JavaScript와 Typescript로 개발하고 있습니다.어레이의 중복을 체크하는 기능은 다음과 같습니다만, 에러가 표시되어 해결 방법을 확실히 알 수 없습니다.다음은 오류와 코드 발췌입니다. 오류: 속성 ‘toLocaleLowerCase’가 유형 ‘Registration’.ts(2339)에 없습니다. 등록.ts export interface Registration { address: string; comment?: string; fullname?: string; } JS 파일 const nameAlreadyExist = (name: any): void => { const nameExist = filteredRegistrationName.value.findIndex((registrationName) => registrationName.fullname.toLocaleLowerCase() === …

오류: ‘등록’ 유형에 속성이 없습니다.ts(2339) 더 보기 »