v-for list in dialog disappears after dialog closes

37 Views Asked by At

I have a dialog that contains v-navigation-drawer and a list is rendered inside. It works fine on the first dialog open, but after closing it, it won't show the list the second time.

My navigation:

<v-navigation-drawer floating height="140px" class="w-100">
  <v-list dense rounded>
    <v-divider></v-divider>
    <v-list-item-group class="mt-3" color="indigo" mandatory>
      <v-list-item v-for="(desc, index) in dataList" :key="index" @click="getDesc(desc)">
        <v-list-item-action-text class="pe-4">{{ desc.title }}</v-list-item-action-text>
        <v-list-item-content>

        </v-list-item-content>
        <v-list-item-icon>
          <v-icon small color="red" class="pe-2" @click="deleteDesc(desc.eid)">mdi-delete</v-icon>
        </v-list-item-icon>
      </v-list-item>
      <v-list-item v-if="!dataList.length">
        مرحله ای وجود ندارد
      </v-list-item>
    </v-list-item-group>
  </v-list>
</v-navigation-drawer>

My data:

data() {
  return {
    dialog: false,
    dataList: [
      {
        eid: "597d2l6orwm6",
        title: "توضیحات اولیه",
        text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است،" +
            " چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است،" +
            " و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود " +
            "ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده،" +
            " شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را" +
            " برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، " +
            "در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها،" +
            " و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی،" +
            " و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
      }
    ],
    descObj: {}
  }
}

First time opening dialog:

first time opening dialog

Second time opening dialog:

the second try on

1

There are 1 best solutions below

0
sanaz baghban On

It seems like Vuetify 2 has a bug using navigation drawer. I changed it to v-list

<v-list dense rounded class="w-100">
            <v-divider></v-divider>
            <v-list-item-group class="mt-3" color="primary" mandatory>
              <v-list-item v-for="(desc, index) in descList" :key="index" @click="getDesc(desc)">
                <v-list-item-action-text class="pe-4">{{ desc.title }}</v-list-item-action-text>
                <v-list-item-content>

                </v-list-item-content>
                <v-list-item-icon>
                  <v-icon small color="red" class="pe-2" @click="deleteDesc(desc.eid)">mdi-delete</v-icon>
                </v-list-item-icon>
              </v-list-item>
              <v-list-item v-if="!descList.length">
                توضیحاتی وجود ندارد
              </v-list-item>
            </v-list-item-group>
          </v-list>

It works fine now