Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NavView contents gone #114

Open
FirokOtaku opened this issue Nov 2, 2020 · 2 comments
Open

NavView contents gone #114

FirokOtaku opened this issue Nov 2, 2020 · 2 comments
Labels
bug Something isn't working component: navview NavView component issues

Comments

@FirokOtaku
Copy link

Description

All the contents of NavView will be missing after some of their attributions changed.

How to reproduce the problem

HTML index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>DEMO</title>

  <link rel="stylesheet" href="css/vuent.css" media="screen" />

  <script src="js/vue.js" defer></script>
  <script src="js/vuent.umd.js" defer></script>
  <script src="js/index.js" defer></script>
</head>
<body>
  <div id="app">
    <vnt-navview :pane-title="page" :header="page">
      <vnt-navview-pane-header>
        <i>123</i>
      </vnt-navview-pane-header>
      <vnt-navview-items>
        <vnt-navview-item :active="page==='page1'"><span @click="changePage('page1')">to page1</span></vnt-navview-item>
        <vnt-navview-item :active="page==='page2'"><span @click="changePage('page2')">to page2</span></vnt-navview-item>
        <vnt-navview-item :active="page==='page3'"><span @click="changePage('page3')">to page3</span></vnt-navview-item>
        <vnt-navview-item :active="page==='page4'"><span @click="changePage('page4')">to page4</span></vnt-navview-item>

      </vnt-navview-items>
      <vnt-navview-content>

        <div v-show="page === 'page1'">
          page 1 content
        </div>

        <div v-show="page === 'page2'">
          page 2 content
        </div>

        <div v-show="page === 'page3'">
          page 3 content
        </div>

        <div v-show="page === 'page4'">
          page4 4 content
        </div>

      </vnt-navview-content>
    </vnt-navview>
  </div>
</body>
</html>

JS js/index.js

const app = new Vue({
    el: '#app',
    data: {
      page: 'page2',
    },
    methods: {
        changePage: function(page)
        {
            this.page = page;
        },
    },
});

vuent.umd.js and vuent.css were downloaded from CDN and referenced locally.

Before clicking any <vnt-navview-item>

1

After clicking

2

All the contents were gone.

System Details

Framework Version
Browser Chrome 86.0.4240.111
Vue.js 2.6.12
Vuent.js Latest version downloaded from CDN when at 2020-11-02
@FirokOtaku FirokOtaku changed the title NavView chilren gone NavView contents gone Nov 2, 2020
@theGeekyLad
Copy link

theGeekyLad commented Dec 17, 2020 •
edited
Loading

Facing the same. Conditionally displaying an element that lives within vnt-navview-content kind of "resets" the entire vnt-navview widget. Can't just find a workaround yet.

Incidentally, for an element actually present on the DOM, even modifying it's opacity is futile as the widget awfully resets. So it's clearly not about v-if playing with the DOM or v-show.

@arturmiz arturmiz added bug Something isn't working component: navview NavView component issues labels Mar 13, 2021
@hariskamran
Copy link

Facing same issue. After adding v-model to input inside navview, widget resets when anything is typed in the input.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working component: navview NavView component issues
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@arturmiz @FirokOtaku @theGeekyLad @hariskamran