Значение Vue, вычисленное из реквизита, не определено, когда реквизит динамически устанавливается с помощью геттера Vuex. - PullRequest
Новая
       12

Значение Vue, вычисленное из реквизита, не определено, когда реквизит динамически устанавливается с помощью геттера Vuex.

0 голосов
/ 08 июля 2019

Я создал небольшой компонент для переключателя, похожего на matrialdesign. Состояние переключателя можно установить с помощью свойства «active». Для переключения статуса я использую вычисленное значение, потому что реквизиты не могут быть изменены.

Если я использую тег компонента с жестко закодированным «активным» пропом, это сработает. Если я использую геттер vuex для установки пропа, то значение пропа получить правильное, но вычисленное значение «неопределено».

Здесь компонент: 

<template>
    <div class="flex items-center">
        <div class="flex h-6 rounded-full shadow w-12 cursor-pointer" :class="status" @click="toggle">
            <div class="flex h-6 rounded-full shadow w-6 bg-blue-500">
                <slot></slot>
            </div>
        </div>
        <label class="m-0 ml-2 text-lg normal-case">{{label}}</label>
    </div>
</template>
<script>
    export default{
        props:{
            active: Boolean,
            label: String
        },
        data() {
            return { isActive: this.active }
        },
        computed:{
            status(){

                return this.isActive ? 'justify-end bg-success' : 'justify-start bg-primary';
            }
        },
        methods:{
            toggle(){
                this.isActive = !this.isActive;
            },
        }
    }
</script>

Это работает: 

<toggle label="Foo" active="true">Foo</toggle>

Это не: 

<toggle label="Foo" :active="this.$store.getters.FooStatus">Foo</toggle>

В Vue Devtools я вижу, что active это true / false в зависимости от FooStatus, но isActive не определено.

Ответы [ 2 ]

0 голосов
/ 08 июля 2019

Я изменил код, как вы предложили, и теперь isActive имеет значение false независимо от того, активное свойство имеет значение true или false. Вы правы, похоже, что начальное значение Vuex не определено. И почему-то isActive не обновляется при смене активного. Таким образом, мое «быстрое и грязное» решение - добавить часы на active: 

 watch: {
    active: function active() {
      this.isActive = Boolean(this.active);
    }
  }
0 голосов
/ 08 июля 2019

Я заметил две вещи:

  • В первом случае вы устанавливаете active prop в строковое значение true. Вы должны использовать :active="true" или, что еще лучше, только active без аргумента.
  • Во втором случае использования не следует использовать this, поскольку шаблон уже оценен со всеми свойствами, методами и т. Д. В локальной области. То есть это должно быть только 
:active="$store.getters.FooStatus"

Возможно, причина в том, что изменение не распространяется, поскольку свойство не является реактивным. Это происходит, например, если начальное значение из vuex, переданное :active, равно undefined. Таким образом, вы должны определить значение по умолчанию: 

active: {
  default: false,
  type: Boolean
}

В качестве альтернативы вы можете присвоить правильное значение полю данных: 

data() {
  return {
    isActive: Boolean(this.active)
  };
}
...