inflearn logo
강의

講義

知識共有

クエサー(Quasar)完璧マスター:Vueフロントウェブをすばやく作成したい場合(Based Vue3)

q-tab 오류 문의

238

joohyun kim

投稿した質問数 4

0

 

 <q-tabs v-model="tab" class="bg-grey-9" dense align="justify">
        <q-tab class="text-orange" name="C" icon="mail" label="콘텐츠 등록" />
        <q-tab class="text-cyan" name="M" icon="alarm" label="메뉴 등록" />
      </q-tabs>

      <div class="col-8">
        <q-form @submit.prevent="handleSubmit">
          <q-card-section class="q-gutter-y-sm">
            <div class="flex justify-between">
              <q-select
                v-model="newCategory.majorCategory"
                outlined
                :options="majorCategoryOptions"
                emit-value
                map-options
                option-value="value"
                option-label="label"
                placeholder="::대분류선택::"
                style="width: 300px"
              >
                <template v-if="!newCategory.majorCategory" #selected>
                  <span class="text-grey-7">::대분류선택::</span>
                </template>
              </q-select>
              <q-select
                v-model="newCategory.middleCategory"
                outlined
                :options="middleCategoryOptions"
                emit-value
                map-options
                option-value="value"
                option-label="label"
                placeholder="::중분류선택::"
                style="width: 300px"
              >
                <template v-if="!newCategory.middleCategory" #selected>
                  <span class="text-grey-7">::중분류선택::</span>
                </template>
              </q-select>
            </div>

분류 선택 없이 탭메뉴 이동 시에는 해당 영역의 카테고리를 잘 불러 옵니다.
하지만 분류 카테고리를 선택후 탭메뉴를 이동시에 오류가 발생 합니다.

변수 초기화 (탭메뉴 이동시)

const getInitialForm = async (cinfo = 'C') => {
  newCategory.value = {
    parent: null,
    majorCategory: null,
    middleCategory: null,
    subCategory: null,
    detailCategory: null,
    ctitle: '',
    ccode: '',
    clevel: 0,
    cinfo: cinfo,
    order: null,
    open_flag: 'Y',
    clink: '',
  };
  tab.value = cinfo; // Ensure the tab reflects the initial cinfo value

  // Initialize category options
  majorCategoryOptions.value = [];
  middleCategoryOptions.value = [];
  subCategoryOptions.value = [];
  detailCategoryOptions.value = [];
};

// 대분류
const fetchCategories = async () => {
  try {
    const result = await get_category_child(null, newCategory.value.cinfo);
    majorCategoryOptions.value = result.map(cat => ({
      label: cat.ctitle,
      value: cat.ccode,
    }));
    middleCategoryOptions.value = [];
    subCategoryOptions.value = [];
    detailCategoryOptions.value = [];
  } catch (error) {
    console.error(error);
  }
};


// 카테고리 선택에 따른 하위 카테고리 갱신
watch(
  () => newCategory.value.majorCategory,
  (newValue, oldValue) => {
    if (newValue !== oldValue && newValue !== null) {
      fetchMiddleCategories(newValue);
    }
  },
);

 

탭메뉴 이동시에 초기화도 진행 하였습니다만
계속 오류가 발생하는데 조언 부탁 드립니다.

 

감사합니다.

vue.js quasar

回答 1

0

gymcoding

안녕하세요. Vue 버전을 업그레이드해 보시겠어요?

참고 링크

ComboBox 관련해서 질문 드립니다.

0

69

2

<g-page class="q-pa-xl"> 했는데도 여백 안생김

0

83

2

quasar intellisense extension 관련 문의

0

263

2

q-upload 문의 드립니다.

0

490

1

q-input과 :rules 속성을 함께 쓸때, items-center 속성이 이상한 현상

0

309

1

Key값으로 Object 사용가능할까요?

0

230

1

npm run build 시 오류 발생합니다

0

460

1

fontawsome 사용법

0

251

1

Quasar 관련 익스텐션

0

216

1

VUE를 이용해서 프로그램 파일을 실행할수 있을까요?

0

410

1

q-input 태그 내용사라짐

0

272

1

q-input 컴포넌트 질문

0

466

1

버튼이 마음대로 크기가 바뀌어요

0

655

1

다크 모드 처리 관련하여 질문드립니다.

0

532

1

script setup 태그 유무에 따라서 페이지 출력이 안됩니다.

0

543

3

vue3 composition api (script setup) 사용 시 전역변수 접근

0

1440

1

한글 실시간 바인딩

2

2532

2

vue3 composition Api 사용시 setup 내부에서도 /src/boot에 설정한 constatns.js 값을 가져올수 있나요?

0

396

1

router.push로 이동 시, 유튜브 페이지의 컨텐츠 영역 안보이는 현상

0

464

1

validation

0

367

1

CORS 설정

0

605

1

질문 있습니다

0

334

1

Helper Classes

0

310

1

Quasar 내장 컴포넌트 색 질문입니다.

0

444

1