search

arturmiz / vuent

🎨 Vue.js components implementing Microsoft Fluent Design
https://vuentjs.org
MIT License
279 stars 24 forks source link

NavView contents gone #114

Open FirokOtaku opened 4 years ago

FirokOtaku commented 4 years ago

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
theGeekyLad commented 3 years ago

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.

hariskamran commented 3 years ago

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