Vuetify 내비게이션 드로어가 한 번 작동한 후 멈춥니다.

Vuetify 내비게이션 드로어가 한 번 작동한 후 멈춥니다.

Vuetify 내비게이션 드로어를 사용하고 있습니다.여는 요소는 헤더의 다른 컴포넌트(v-toobar-side-icon)에 있습니다.매장에 서랍의 개폐 상태를 보관하고 있습니다.나는 서랍의 상태를 파악하기 위해 계산된 방법을 사용하고 있다.에러 메세지가 계속 표시된다.

Computed property "drawerState" was assigned to but it has no setter.

이 일이 일어나는 건 알아 왜냐면 내가 이 일을v-model서랍의 가시성을 조절합니다.계산 세터를 사용하여 드로어의 상태를 변경하는 것이 아니라 클릭 방식을 사용하고 싶습니다.

나는 그것을 사용해봤어요.:value대신v-model그것도 제대로 작동하지 않아요.실제로 문제가 되고 있는 것은, 네비게이션 드로어의 제어(열림/닫힘)가 홈 페이지에서 동작하고 있습니다만, 다른 페이지로 이동하면 동작이 정지하는 것입니다.홈페이지로 돌아가도 동작하지 않습니다.getters와 setters는 상태를 바꾸고 있어야 할 방법을 갱신하고 있습니다.isActive내비게이션 드로어 스테이 속성false.

App.vue

<template lang="pug">
  v-app
    app-NavDrawer
    app-header
    router-view
    v-footer(app dark)
      span &copy; 2018 #[a(href="http://www.smellydogcoding.com") Smellydog Coding]
</template>

<script>
  import Header from './components/header/Header.vue'
  import NavDrawer from './components/header/NavDrawer.vue'
  export default {
    data () {
      return {

      }
    },
    components: {
      appHeader: Header,
      appNavDrawer: NavDrawer
    }
  }
</script>

<style>
html {
  overflow-y: auto;
}
a {
  text-decoration: none;
}
 footer {
   color: white;
 }
</style>

Header.vue

<template lang="pug">
  v-toolbar.mt-0(dark)
    v-toolbar-side-icon(@click.stop="openDrawer")
    router-link(to="/" tag="v-toolbar-title") Pool Math
</template>

<script>

export default {
  methods: {
    openDrawer() {
      this.$store.dispatch('navDrawer','open');
    }
  }
}
</script>

<style scoped>
  .toolbar__title {
    cursor: pointer;
  }
</style>

NavDrawer.표시하다

<template lang="pug">
  v-navigation-drawer(v-model="drawerState" dark fixed temporary)
    v-list.pa-1
      v-list-tile(avatar tag="div")
        v-list-tile-avatar
          img(src="../../../public/v.png")
        v-list-tile-content
          v-list-tile-title Guest
        v-list-tile-action
          v-btn(icon @click.stop="closeDrawer")
            v-icon close
    v-list.pt-0(dense)
      v-divider(light)
      router-link(to="/s1p0" tag="v-list-tile" active-class="active").expansion-panel__header.how-to
        v-list-tile-content
          v-list-tile-title.text-xs-center How to Use This Website
      v-expansion-panel
        v-expansion-panel-content
          div(slot="header") Section 1 - Conversions
          router-link(to="/s1p0" tag="v-list-tile" active-class="active")
            v-list-tile-content
              v-list-tile-title 1.0 - Useful Conversions
          router-link(to="/s1p1" tag="v-list-tile" active-class="active")
            v-list-tile-content
              v-list-tile-title 1.1 - Convert ounces to pounds
          router-link(to="/s1p2" tag="v-list-tile" active-class="active")
            v-list-tile-content
              v-list-tile-title 1.2 - Convert fluid ounces to gallons
          router-link(to="/s1p3" tag="v-list-tile" active-class="active")
            v-list-tile-content
              v-list-tile-title 1.3 - Convert fluid ounces to cups
          router-link(to="/s1p4" tag="v-list-tile" active-class="active")
            v-list-tile-content
              v-list-tile-title 1.4 - Convert inches to feet
        v-expansion-panel-content
          div(slot="header") Section 2 - Area and Volume
          router-link(to="/s2p0" tag="v-list-tile" active-class="active")
            v-list-tile-content
                v-list-tile-title 2.0 - Introduction to This Section
          router-link(to="/s2p1" tag="v-list-tile" active-class="active")
            v-list-tile-content
                v-list-tile-title 2.1 - Area of a Swimming Pool
          router-link(to="/s2p2" tag="v-list-tile" active-class="active")
            v-list-tile-content
                v-list-tile-title 2.2 - Area of a Hot Tub
          router-link(to="/s2p3" tag="v-list-tile" active-class="active")
            v-list-tile-content
                v-list-tile-title 2.3 - Volume of Water in a Swimming Pool
          router-link(to="/s2p4" tag="v-list-tile" active-class="active")
            v-list-tile-content
                v-list-tile-title 2.4 - Volume of Water in a Multi-Depth Pool
          router-link(to="/s2p5" tag="v-list-tile" active-class="active")
            v-list-tile-content
                v-list-tile-title 2.5 - Volume of Water in a Hot Tub
          router-link(to="/s2p6" tag="v-list-tile" active-class="active")
            v-list-tile-content
                v-list-tile-title 2.6 - Volume of Water in a Hot Tub with Seats
          router-link(to="/s2p7" tag="v-list-tile" active-class="active")
            v-list-tile-content
                v-list-tile-title 2.7 - Volume of Water Loss in a Swimming Pool
          router-link(to="/s2p8" tag="v-list-tile" active-class="active")
            v-list-tile-content
                v-list-tile-title 2.8 - Volume of Water Loss in a Hot Tub
        v-expansion-panel-content
          div(slot="header") Section 3 - Water Balance
          router-link(to="/s3p0" tag="v-list-tile" active-class="active")
            v-list-tile-content
                v-list-tile-title 3.0 - Introduction to This Section
          router-link(to="/s3p1" tag="v-list-tile" active-class="active")
            v-list-tile-content
                v-list-tile-title 3.1 - Calculate Saturation Index
          router-link(to="/s3p2" tag="v-list-tile" active-class="active")
            v-list-tile-content
                v-list-tile-title 3.2 - Calculate Saturation Index - With CA
</template>

<script>
export default {
  computed: {
    drawerState() {
      return this.$store.getters.navDrawer; 
    }
  },
  methods: {
    closeDrawer() { this.$store.dispatch('navDrawer','close')}
  }
}
</script>

<style scoped>
  aside {
    overflow-y: auto;
  }
  .navigation-drawer {
    padding: 0 0 1.0rem;
  }
  .how-to {
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .how-to .list__tile__title {
    font-size: 1.15rem;
  }
</style>

store.displaces를 설정합니다.

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    drawer: false
  },
  getters: {  // send state to a component
    navDrawer: state => {
      return state.drawer
    }
  },
  mutations: { // modify state synchronously
    navDrawer: (state, command) => {
      command === 'open' ? state.drawer = true : state.drawer = false;
    }
  },
  actions: { // modify state aschronously
    navDrawer: ({commit}, command) => {
      commit('navDrawer', command)
    }
  }
});

를 사용하지 않을 경우v-model를 사용하여 값의 바인딩으로 대체할 수 있습니다.:value아트리뷰트, 말씀하신 대로입니다.하지만 그렇게 한다면, 당신은 그 노래를 들어야 할 것이다.@input이벤트, 값이 변경될 때 발생합니다.

제 생각에, 당신이 하려는 일을 성취할 수 있을 것 같습니다.v-model잠깐 동안:value="drawerState"새로운 방법을 결합함으로써updateDrawerState에게@input이벤트입니다.

당신의.NavDrawer.vue으로 시작한다.

<template lang="pug">
  v-navigation-drawer(:value="drawerState" @input="updateDrawerState" dark fixed temporary)

이 메서드를 같은 컴포넌트에 추가해야 합니다.

updateDrawerState(state) {
  if (state) {
    this.closeDrawer();
  }
}

참고로:당신은 계산한 세터를 첨가하여 거의 같은 것을 달성할 수 있습니다..

computed: {
    drawerState: {
      get() {
        return this.$store.getters.navDrawer; 
      },
      set(state) {
        if (state) {
          this.closeDrawer();
        }
      },
    },
},

Vuetify의 Navigation Drawer를 Vuex 상태 속성으로 동작시키는 방법을 찾고 있는 사람이 있다면, 이 사례를 관리하는 방법은 다음과 같습니다.앱을 크래시하는 무한 루프를 피하는 비결은 계산 속성의 설정기 메서드에 대한 조건이 있어야 합니다.$store.state만약 component's 부동산만 바뀔 것이다.v-model가치가 하나에서 다르다.$store.state.

  computed: {
    navigation: {
      get () {
        return this.$store.state.navigation
      },
      set (state) {
        if (state !== this.$store.state.navigation) {
          this.$store.dispatch('toggleNavigation')
        }
      }
    }
  },

나는 햄버거 아이콘을 움직여 이(비록 기술적으로 작품이었다에)를 해결할 수 있었다.v-toolbar-side-icon헤더 구성 요소는nav 서랍 구성 요소에에서:.

v-toolbar-side-icon(@click="drawer = !drawer") v-navigation-drawer(v-model="drawer" dark fixed temporary width="350")

열기 및 닫기 버튼이 현재 사용할 수 있는 동일한 컴포넌트에 있기 때문에

@click="drawer = !drawer"

내비게이션 드로어의 가시성을 전환합니다.

토마스 페로:

귀사의 솔루션을 시험해 보았습니다만, 다음의 몇개의 사소한 수정으로 올바르게 동작합니다.

methods: {
    updateDrawerState(state) {
      if (!state) { this.closeDrawer(); }
      else { this.openDrawer(); }
      console.log(state)
    },
    openDrawer() { this.$store.dispatch('navDrawer','open') },
    closeDrawer() { this.$store.dispatch('navDrawer','close') }
  }

그냥 쓰려고 했을 때

updateDrawerState(state) {
  if (state) {
    this.closeDrawer();
  }
}

햄버거를 클릭하면 내비게이션 드로어가 열리고 바로 닫힙니다.햄버거를 열자마자 상태가 바뀌고 상태가 바뀔 때마다 드로어가 닫히기 때문에 이렇게 된 것 같습니다. 「」를 기동합니다.openDrawer ★★★★★★★★★★★★★★★★★」closeDrawer상태에 따라 모든 것이 예상대로 작동합니다.

해 주셔서 합니다.:value 더 것은 제가 하기 위해서입니다.@input된 투고::value「 」를 참조해 주세요).★★★★★★★★★★★★★★★★★★★!

언급URL : https://stackoverflow.com/questions/48388834/vuetify-navigation-drawer-works-once-then-stops