Vue JS, 속성에 따라 하나의 JSON 어레이에서 여러 어레이를 만듭니다.

저는 Vue JS에 대해 잘 모르기 때문에 JSON 어레이를 통해 공유 객체 프로펠러 값을 기반으로 여러 어레이를 만들 때 제공하는 기능을 사용하려고 합니다.이 JSON을 기반으로 합니다. { fields: [ { “group”: “group1”, “label”: “label1”, “value”: “value1”, }, { “group”: “group1”, “label”: “label2”, “value”: “value2”, }, { “group”: “group2”, “label”: “label3”, “value”: “value3”, }, { “group”: … Read more

vue 파일의 VSCode 스니펫에 사용되는 범위는 무엇입니까?

프로젝트용 스니펫 파일을 만들고 있습니다.단, Vue 파일에 대해서만 일부 스니펫의 범위를 정의합니다.물론 scope 속성을 생략하여 모든 파일에 적용할 수 있다는 것은 알지만, 저는 그것을 원하지 않습니다. 다른 옵션을 시험해 보았습니다(vue, html, vuejs)는 다음과 같습니다. 그러나 이 스니펫은 표시되지 않습니다. 스코프를 삭제하면, 스니펫이 표시됩니다. 하지만 필요 없는 모든 종류의 파일에 표시되기 때문에 원하지 않습니다. https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-scope에서 공식 … Read more

WebStorm을 사용하여 Vue 3 스크립트 설정 구성 요소 가져오기

WebStorm에서 Vue 3 컴포넌트와 정상적으로 동작하도록 자동 Import 및 코드 완료를 하는 방법이 있습니까?<script setup>문제가 좀 생겼기 때문입니다. FooBar라는 컴포넌트가 있다고 칩시다.vue: <script setup lang=”ts”> import { ref } from ‘vue’ const counter = ref(0) </script> Import를 하고 싶은데 코드 완성에 의해 권장되지 않습니다. 단, 교환할 때는<script setup>단골로<script>, 모든 것이 예상대로 동작합니다. <script lang=”ts”> import … Read more

vue2의 글로벌 믹스에서 vue3의 글로벌 컴포넌트로 이행

새 앱을 vue2에서 vue3로 이식합니다.vue3에서 코드를 재사용하는 방법은 mixin을 권장하지 않기 때문에 Im은 이들을 컴포지터블로 변환하려고 합니다. 2개의 믹스인(메서드)이 있습니다.__(key)그리고.__n(key, number)에mixins/translate.js어떤 단어든 앱의 로케일로 변환됩니다. module.exports = { methods: { /** * Translate the given key. */ __(key, replace = {}) { // logic return translation } 자, 이렇게 변환했습니다. 컴포지터블/translate.js export function __(key, replace … Read more

v-for 루프에서 계산된 함수를 통해 데이터 가져오기

인event.agents저장된 일반 텍스트 ID가 있습니다. 특정 데이터를 얻기 위해 가져오려고 합니다.데이터를 가져오기 위해 계산된 함수를 작성했는데 백엔드 서버가 항상 이렇게 크래시됩니다. 캐스트 에러 모델 “User”의 경로 “_id”에서 값 “[Object Object]”(타입 문자열)에 대해 ObjectId로 캐스팅하지 못했습니다. 그래서 어떻게든 Promise와 함께 일해야 할 것 같아요.하지만 나는 방법은 잘 모르겠습니다. 이 방법에서는 다음과 같이 필요한 에이전트 데이터를 표시합니다. … Read more

v-switch 크기를 늘리는 방법

v-switch api에 나열되지 않아 전체 v-switch 구성 요소의 크기를 늘리고 싶다. sas 변수를 변경하려고 했지만 애플리케이션이 현재 크기를 보기 위해 클릭한 전체 스위치가 변경됨 질문에 대한 답변 SAS 변수를 변경할 때는 응용 프로그램의 모든 요소에 영향을 주어야 합니다. 하나만 바꾸려면v-switch, 다음과 같이 쓸 수 있습니다. <template> <v-switch v-model=”switch1″ class=”custom-switch” :label=”`Switch 1: ${switch1.toString()}`” ></v-switch> </template> <style> … Read more

typescript 어떻게 다른 인수의 유형에서 한 인수의 유형을 추론할 수 있는가?

type ChartType = ‘bar’ ‘line’ ‘pie’; interface PropsType { type: EChartType; xData: **** ; seriesData: **** ; } const props = defineProps<PropsType>(); 하는 방법 언제ChartType = ‘bar’,xData타입이 있다string[]그리고.seriesData타입이 있다number[].언제ChartType = ‘line’,xData타입이 있다Array<string number>그리고.seriesData타입이 있다string[].언제ChartType = ‘pie’,xData타입이 있다number[]그리고.seriesData타입이 있다{value:string,name:string}[]. 질문에 대한 답변 이것이 당신의 질문에 대한 대답입니다. type TPropsType = { type: “bar” xData: string[] seriesData: … Read more

vue를 사용하여 Real Time Apex Chart를 작성하는 방법

Apex Charts 웹사이트의 vue 문서를 따르려고 합니다.https://apexcharts.com/vue-chart-demos/line-charts/realtime/ 부품을 구성하는 방법은 실용적이지 않습니다.이 예에서 누락된 방법이 있는 것 같습니다. 위 예시와 같이 매초 데이터를 가져오는 차트를 만들고 싶다(1초치 데이터) <template> <VueApexCharts type=”line” height=”350″ width=”100%” :options=”chartOptions” :series=”series” ref=”chart” /> </template> <script> import { ref } from “vue”; import VueApexCharts from “vue3-apexcharts”; import { useStore } from “vuex”; … Read more

css-loader에 대한 종속성 피어 Webpack5를 확인할 수 없습니다.

사실 저는 javascript가 처음이라서 설치하려고 합니다.vue-audio-visual할 수 있습니다.그런데 노드 콘솔에 무슨 관계가 있는지 알 수 없는 이상한 오류가 발생했습니다.npm 에러는 다음과 같습니다. code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: css-loader@6.6.0 npm ERR! Found: webpack@4.46.0 npm ERR! node_modules/webpack npm ERR! peer webpack@”^4.0.0 ^5.0.0″ from @soda/friendly-errors-webpack-plugin@1.8.1 npm ERR! node_modules/@soda/friendly-errors-webpack-plugin npm … Read more

새로 고칠 때까지 vue3 페이지가 스크롤되지 않음

나는 vue3 웹 앱을 가지고 있다.제 문제는 일단 다음 방법으로 페이지로 이동하려고 하면<router-link to =”/Dashboard”/> 이하에,Dashboard.vue <template> <div class=”enquiry”> <div class=”row”> <div class=”col-6″ v-for=”(p, index) in keyAreas” :key=”index”> <div class=”card” style=”margin-bottom: 10px”> <div class=”card-body”> <h2 class=”card-title”> {{ p.number }} <span class=”card-title” style=”float: right”>{{ p.title }}</span> </h2> <h5 class=”card-text”> Properties for rent <span class=”card-title” style=”float: right; … Read more

에일리어스를 사용해 Import 하는 파일의 파일 패스를 Vite(Vue3)로 취득할 수 있습니까?

안녕하세요! 몇 가지 질문이 있습니다.에일리어스를 사용하여 Import하는 파일의 파일 경로를 Vite(Vue3)로 얻을 수 있습니까? 셋업 이 디렉토리 구조는 수사 목적으로만 사용됩니다. src/ module_a/ some_script.js another_script.js module_b/ some_script.js another_script.js vite.config.js 시나리오 예를 들어 I가 다음 파일에 있다고 가정합니다. 다음을 사용하여 Import하는 경우:src/module_a/some_script.js import “#/another_script.js” …그러면,#에일리어스는 자동으로 지정됩니다../src/module_a 다른 모듈 위치에 있을 때 알림./src/module_b/some_script.js. 스테이트먼트: import ‘#/another_script.js’ … Read more

Vue 앱의 사전 커밋 후크에서 TS 오류 확인

그래서 저희 앱에는 허스키를 사용한 깃 훅이 있습니다.누군가 코드를 커밋하면 사전 커밋 코드를 실행합니다. #!/bin/sh . “$(dirname “$0″)/_/husky.sh” export NVM_DIR=”$HOME/.nvm” [ -s “$NVM_DIR/nvm.sh” ] && . “$NVM_DIR/nvm.sh” nvm use npx lint-staged 패키지에 넣어주세요.json은 – “lint-staged”: { “*.(js ts vue)”: “eslint –cache –fix –max-warnings=0” } 보풀 에러는 검출되지만, 프로젝트의 타이프 스크립트의 문제는 검출되지 않습니다.예를 들어 호출 … Read more