Переопределение значения глобальной переменной - PullRequest
Новая
       74

Переопределение значения глобальной переменной

0 голосов
/ 29 мая 2020

Я только что создал две переменные $isCompany и $isLoggedIn в моем main.js. 

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";

Vue.config.productionTip = false;
Vue.prototype.$isCompany = true;
Vue.prototype.$isLoggedIn = true;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

Мой вопрос : Как мне получить доступ к этим переменным в моем <Button> компонент в Navigation.vue? v-ifs работают, но я не могу переключить значение переменной, поэтому я думаю, что есть проблема с переопределением значения. 

<div v-if="this.$isLoggedIn" class="header-left">
  <User v-if="this.$isCompany" name="Company" img="..."></User>
  <User v-if="!this.$isCompany" name="Not Company" img="..."></User>
  <Button @onclick="this.$isCompany = !this.$isCompany" :color="'grey'" :isIconOnly="true"><b-icon icon="arrow-down-up"></b-icon></Button>
</div>

Если вам это нужно, вот как Я привязываю @onclick к своему <Button> компоненту: 

<button @click="$emit('onclick')" :class="['button', 'size-'+size, 'color-'+color, isRounded ? 'type-rounded' : '', isIconOnly ? 'type-icon-only' : '']">

EDIT: Только что заметил эту ошибку в моей консоли, если я нажму кнопку: enter image description here

1 Ответ

0 голосов
/ 29 мая 2020

v-if s работают

Вы уверены? Я ожидаю, что v-if="this.$isLoggedIn" не сработает, потому что this здесь не следует использовать (это избыточно; уже есть неявное this., поэтому вы в основном делаете this.this.$isLoggedIn).

но я не могу переключать значение переменной

Вероятно, это связано с тем, что вы не определили переменные «реактивным» способом. 

Vue.prototype.$isCompany = true;
Vue.prototype.$isLoggedIn = true;

Кажется немного неудобным определять такие переменные в объекте-прототипе Vue.

Вы можете определить глобальные переменные реактивным способом, определив их как свойства данных root Vue экземпляр: 

new Vue({
  router,
  render: h => h(App),

  data: {
    isCompany: false,
    isLoggedIn: false,
  }
}).$mount("#app");

Вы можете получить к ним доступ из любого дочернего компонента через this.$root.isCompany. Итак, в вашем шаблоне вы должны сделать: 

<User v-if="$root.isCompany" name="Company" img="..."></User>

Если вы действительно хотите избежать использования $root. в шаблоне, вы можете определить свойства прокси в Vue объект-прототип (в дополнение к вышеупомянутому): 

Object.defineProperties(Vue.prototype, {
  $isCompany: {
    get() { return this.$root.isCompany },
    set(x) { this.$root.isCompany = x }
  },
  $isLoggedIn: {
    get() { return this.$root.isLoggedIn },
    set(x) { this.$root.isLoggedIn = x }
  },
})

Теперь вы можете сделать это в шаблоне: 

<User v-if="$isCompany" name="Company" img="..."></User>

Вот небольшая демонстрация: 

Object.defineProperties(Vue.prototype, {
  $isCompany: {
    get() { return this.$root.isCompany },
    set(x) { this.$root.isCompany = x }
  }
})

Vue.component('child', {
  template: '<div><input type="checkbox" v-model="$isCompany"> {{ $isCompany }}</div>'
})

new Vue({
  el: '#app',
  data: {
    isCompany: false,
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <child></child>
</div>
...