v-model에 소품 바인딩 시도 중

v-model에 소품 바인딩 시도 중

나는 vuetify.js를 사용하고 애플리케이션 전체에서 재사용할 수 있는 구성요소를 만들려고 한다.비록 그것은 완벽하게 잘 작동하지만, 나는 그것이 올바른 방법인지 확신할 수 없다.

항상 메뉴 옵션이 같지만 UI 요소에서 열 수 있는 내비게이션 드로어 구성요소를 만들고 있다.

아래는 암호다.

// 내비게이션 바.부에를 하다

<template>
  <v-navigation-drawer
    temporary
    v-model="drawerFlag"
    light
    overflow
    fixed
  >
    <v-list>
      <v-list-tile>
        <v-list-tile-action @click.stop="toggleDrawer()">
          <v-btn icon>
            <v-icon>close</v-icon>
          </v-btn>
        </v-list-tile-action>
      </v-list-tile>
    </v-list>
    <v-list class="pt-0">
      <template v-for="item in items">
        <v-list-tile :key="item.title" :to="item.link">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-divider></v-divider>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
  export default {
    props: ['drawer'],
    data() {
      return {
        items: [
          { title: 'Home', icon: 'home', link: '/home'},
          { title: 'History', icon: 'history', link: '/history' },
          { title: 'Wallet', icon: 'account_balance_wallet', link: '/wallet' },
          { title: 'My Profile', icon: 'person', link: '/profile' },
          { title: 'Settings', icon: 'settings', link: '/settings' },
          { title: 'About', icon: 'error', link: '/about' },
          { title: 'Logout', icon: 'power_settings_new', link: '/logout' },
        ]
      };
    },
    computed: {
      drawerFlag: {
        get: function() {
          return this.drawer
        },
        set: function() {

        }
      }
    },
    methods: {
      toggleDrawer: function() {
        this.$emit('emitToggleDrawer');
      }
    }
  }
</script>

//홈.vue

<template>
  <div class="full-screen">
    <navigation-bar :drawer="drawer" v-on:emitToggleDrawer="toggleDrawer"></navigation-bar>
    <v-btn icon class="mt-3 fixed-position" @click.stop="drawer = !drawer">
      <v-icon>menu</v-icon>
    </v-btn>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data() {
      return {
        drawer: null
      };
    },

    computed: {
      user() {
        return this.$store.getters.user;
      }

    },

    methods: {
      toggleDrawer: function () {
        this.drawer = !this.drawer;
      }
    }
  };
</script>

위의 코드에서..

상위 구성 요소에서는 내비게이션 드로어를 여는 버튼이 있고 내비게이션 드로어의 상태는 "드로어"라는 상위 구성 요소에서 유지된다.그런 다음, "드로어"를 하위 구성요소에 대한 소품으로 전달하고 하위 구성요소에서 "emitToggleDrawer"라는 상위 구성요소로 이벤트를 트리거하는 방법을 전달한다.

하위 구성 요소에서는 v-model="drawerFlag"를 사용하는 vuetify.js 내비게이션 드로어를 사용하고 있으며 여기서 drawerFlag는 계산된 속성이다.v-model="rawer" 즉, 소품 바인딩을 사용하려고 했을 때 오류가 발생하고 있었다.그러면 내비게이션 드로어 내부의 요소를 클릭하여 내비게이션 드로어를 닫을 수 있다.그것을 이루기 위해서, 나는 나중에 부모 구성요소가 듣는 이벤트를 발생시키는 구성요소의 메소드를 호출한다.

이렇게 풀었어.

앱뷰

<my-drawer ref="drawer"></my-drawer>
<my-header @toggle-drawer="$refs.drawer.drawer = !$refs.drawer.drawer"></my-header>

마이 드로어.부에를 하다

<v-navigation-drawer v-model="drawer">
...
data() {
  drawer: true
}

마이헤더.부에를 하다

<v-toolbar-side-icon @click.stop="$emit('toggle-drawer')"></v-toolbar-side-icon>

---

It seems to me that we need v-model="drawer" on custom drawer component so it can properly work on all screen sizes.

따라서 부모(또는 형제)의 가치를 어떻게 해서든지 바꿀 필요가 있다. 그래서 나는 서랍 구성 요소에 ref를 사용하고 있다.아마 바꾸는 대신$refs.drawer.drawer대신 서랍 기능을 호출할 수 있는 데이터.뭐가 더 좋을지 모르겠어.그러나 이것은 모든 화면 크기에 대해 나에게 효과가 있는 유일한 간단한 솔루션이었다.

그래서 내 경우는 머리글에서만 서랍 상태를 바꾸고 있지만, 이걸 쓰고 니 필요에 맞게 맞춰도 될 것 같아.

나는 아래와 같이 비슷한 문제를 풀었다.

• 그냥 사용drawer사용하지 않고drawer그리고drawerFlag
• 하위 구성 요소에 추가 버튼이 없는 경우
• 방출하지 않음event자식에서 부모까지
• 사용.watch아동 구성 요소로서

홈.뷰

<template>
  <div class="full-screen">
    <navigation-bar :drawer="drawer"></navigation-bar>
    <v-btn icon class="mt-3 fixed-position" @click.stop="drawer = !drawer">
      <v-icon>menu</v-icon>
    </v-btn>
  </div>
</template>

<script>
  import NavigationBar from '@/components/NavigationBar';
  export default {
    name: 'home',
    data() {
      return {
        drawer: true
      };
    },
    components: {
      NavigationBar
    }
  }
</script>

내비게이션 바.부에를 하다

<template>
  <v-navigation-drawer
    temporary
    v-model="drawer"
    light
    overflow
    fixed
  >
    <v-list class="pt-0">
      <template v-for="item in items">
        <v-list-tile :key="item.title" :to="item.link">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-divider></v-divider>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
  export default {
    props: ['drawer'],
    data() {
      return {
        items: [
          { title: 'Home', icon: 'home', link: '/home'},
          { title: 'History', icon: 'history', link: '/history' },
          { title: 'Wallet', icon: 'account_balance_wallet', link: '/wallet' },
          { title: 'My Profile', icon: 'person', link: '/profile' },
          { title: 'Settings', icon: 'settings', link: '/settings' },
          { title: 'About', icon: 'error', link: '/about' },
          { title: 'Logout', icon: 'power_settings_new', link: '/logout' },
        ]
      };
    },
    watch: {
       drawer (value) {
          return value;
       }
    }
  }
</script>

참조URL: https://stackoverflow.com/questions/46421080/trying-to-bind-props-to-v-model