小编Raf*_*edo的帖子

我想在整个页面中更改下面的全局变量

Vue.prototype.$color = 'green';

我尝试使用下面的代码,但它只在我创建的组件中更改

watch: {
   cor(newValue, oldVlue) {
       this.$color = newValue;
   }
}

我是否可以创建一种方法来更改页面所有组件的原型变量？

我有一个 AppRoot.vue、AppToolbar.vue 和 AppDrawer.vue

当我单击 AppToolbar.vue 中的按钮时，我需要更改 AppDrawer.vue 的 isDrawerOpen 变量，并在 AppRoot.vue 中声明。

我怎样才能做到这一点？谁能帮我？

AppRoot.vue

<template>
    <v-app id="app-root">
        <app-drawer></app-drawer>
        <app-toolbar :title="title"></app-toolbar>
        <v-content>
            <v-container>
                <slot><h1>Não há nada para exibir aqui!</h1></slot>
            </v-container>
        </v-content>
        <app-footer></app-footer>
    </v-app>
</template>

<script>
    export default {
        name: 'app-root',
        props: ['title'],
    }
</script>

应用工具栏.vue

<template>
    <v-toolbar :color="$color" app>

        <v-layout row hidden-md-and-up>
            <v-toolbar-side-icon @click="openDrawer" class="white--text"></v-toolbar-side-icon>
        </v-layout>

        <v-toolbar-title class="white--text" v-text="title"></v-toolbar-title>

    </v-toolbar>
</template>

<script>
    export default {
        name: 'app-toolbar',
        props: ['title'],
        methods: {
            openDrawer() {

            }
        }
    }
</script>

AppDrawer.vue

<template>
    <v-navigation-drawer …

我正在尝试创建一个模态，但是只有在关闭它时才出现此错误：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

found in

---> <PanelDesconectarModal> at resources\assets\vue\PanelDesconectarModal.vue
       <VNavigationDrawer>
         <PanelDrawer> at resources\assets\vue\PanelDrawer.vue
           <VApp>
             <PanelRoot> at resources\assets\vue\PanelRoot.vue
               <VApp>
                 <Root>

PanelDesconectarModal.vue

<template>
    <v-dialog v-model="value" max-width="350">
        <v-card :dark="($theme === 'dark')">
            <v-card-title class="headline">Desconectar</v-card-title>
            <v-divider></v-divider>
            <v-card-text>Você tem certeza que deseja desconectar-se?</v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn flat @click.native="closeDialog">Cancelar</v-btn>
                <v-btn :color="$color" flat="flat" @click.native="desconectar">Desconectar</v-btn>
            </v-card-actions>
        </v-card> …

I'm trying to host a website in Firebase Hosting (free plan), I followed the steps but it does not generate the file firebase.json

my steps

1- firebase login Already logged in as r*****@gmail.com

2- firebase init

 ######## #### ########  ######## ########     ###     ######  ########
 ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
 ######    ##  ########  ######   ########  #########  ######  ######
 ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
 ##       #### ##     ## ######## ######## …

如何仅在变量设置为 时绑定属性true？

<template>
    <v-list-tile :class="{[$color]: isItemSelected, [$primaryText]: isItemSelected}" :href="route">
        <v-list-tile-action>
            <v-icon :color="$primaryIcon">{{ icon }}</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
            <v-list-tile-title>{{ title }}</v-list-tile-title>
        </v-list-tile-content>
    </v-list-tile>
</template>

<script>
    export default {
        name: 'list-tile-text-icon',
        props: ['icon', 'title', 'route'],
        data: () => ({
            isItemSelected: false
        }),
        created() {
            this.isItemSelected = window.location.href === this.route;
        }
    }
</script>

在第 4 行，我只需要:color="$primaryColor"在isItemSelected变量等于true.