相关疑难解决方法(0)

我正在尝试vuetify在我的项目中实施。我想分开 <v-navigation-drawer>，</v-toolbar>并<v-footer>在三个不同的文件。

目前我正在使用。

Layout.vue

<template>
  <v-app>
    <TopNav :drawer="drawer" :clipped="clipped"></TopNav>
        <SideBar/>
        <v-content>
            <v-container fluid>
                <router-view></router-view>
            </v-container>
        </v-content>
        <FooterArea/>
    </v-app>
</template>

脚本Layout.vue

<script>
import { TopNav, FooterArea, SideBar } from "../layouts/index";

export default {
  name: "Full",
  components: {
    TopNav,
    FooterArea,
    SideBar
  },
  data() {
    return {
      clipped: true,
      drawer: true,
      fixed: false,
      inset: true,
      items: [
        {
          icon: "bubble_chart",
          title: "Inspire"
        }
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: "Vuetify.js"
    };
  }
};
</script> …

有没有一种方法可以简化此代码？

该按钮还应该更改子项的localValue。

Vue.component('my-input', {
  template: `
    <div>
      <b>My Input:</b> <br>
      localValue: {{ localValue }} <br>
      <input v-model="localValue">
    </div>
  `,
  props: ['value'],
  data() {
    return { localValue: this.value }
  },
  watch: {
    value () {
      this.localValue = this.value
    },
    localValue () {
      this.$emit('input', this.localValue)
    }
  }
})

new Vue({
  el: '#app',
  data: () => ({
    parentValue: 'Inital value'
  }),
  methods: {
    change () {
      this.parentValue = 'Changed value'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <my-input v-model="parentValue"></my-input>

  <button @click="change">Change</button><br>

  parentValue: {{ …