Javascript Vue.js-计算属性未更新-子组件

我创建了一个名为DefaultButton的简单组件。 它基于在创建此组件时设置的属性。 关键是，在挂载它之后，它不会对与“defaultbutton”（位于properties中的对象）相关的更改作出反应

<template>
  <button :class="buttonClass" v-if="isActive" @click="$emit('buttonAction', defaultbutton.id)" >
    {{ this.defaultbutton.text }} 
  </button>
  <button :class="buttonClass" v-else disabled="disabled">
    {{ this.defaultbutton.text }} 
  </button>
</template>


<script>
export default {
  name: "defaultbutton",
  props: {
    defaultbutton: Object
  },
  computed: {
    buttonClass() {
      return `b41ngt ${this.defaultbutton.state}`;
    },
    isActive() {
      return (this.defaultbutton.state === "BUTTON_ACTIVE" || this.defaultbutton.state === "BUTTON_ACTIVE_NOT_CHOSEN");
    }
  }
};
</script>

这些项目的状态正在更改，但我无法在生成的“DefaultButtons”上看到任何结果。这些组件中包含的对象类不会更改

@编辑

我完全改变了传递数据的方式。 由于这个改变，我放弃了使用数组；相反，我使用了两个完全不相关的对象。 结果是相同的-子组件对象的类未被删除

DefaulButton.vue：

<template>
  <button :class="buttonClass" v-if="isActive" @click="$emit('buttonAction', defaultbutton.id)" >
    {{ this.defaultbutton.text }} 
  </button>
  <button :class="buttonClass" v-else disabled="disabled">
    {{ this.defaultbutton.text }} 
  </button>
</template>

<style lang="scss">
  import './DefaultButton.css';
</style>

<script>
export default {
  name: "defaultbutton",
  props: {
    defaultbutton: {
      type: Object,
      default: () => ({
        id: '',
        text: '',
        state: '',
      })
    }
  },
  computed: {
    buttonClass() {
      return `b41ngt ${this.defaultbutton.state}`;
    },
    isActive() {
      return (this.defaultbutton.state === "BUTTON_ACTIVE" ||
        this.defaultbutton.state === "BUTTON_ACTIVE_NOT_CHOSEN");
    }
  }
};
</script>

{{this.defaultbutton.text}
{{this.defaultbutton.text}
导入“./DefaultButton.css”；
导出默认值{
名称：“默认按钮”，
道具：{
默认按钮：{
类型：对象，
默认值：（）=>({
id:“”，
文本：“”，
声明：''，
})
}
},
计算：{
buttonClass（）{
返回`b41ngt${this.defaultbutton.state}`；
},
isActive（）{
返回（this.defaultbutton.state==“按钮处于活动状态”||
this.defaultbutton.state==“按钮处于活动状态，未选择”）；
}
}
};

ChangeStateBox.vue：

<template>
    <div class="ui placeholder segment">
        {{ this.state_first.state }}
        {{ this.state_second.state }}
        {{ this.current_active_state }}
      <div class="ui two column very relaxed stackable grid">
        <div class="column">
            <default-button :defaultbutton="state_first" @buttonAction="changecurrentstate(0)"/>
        </div>
        <div class="middle aligned column">
            <default-button :defaultbutton="state_second" @buttonAction="changecurrentstate(1)"/>
        </div>
      </div>
      <div class="ui vertical divider">
        Or
      </div>
    </div>

</template>

<script type="text/javascript">
    import DefaultButton from '../Button/DefaultButton'

    export default {
        name: 'changestatebox',
        data() {
            return {
                current_active_state: 1
            }
        },
        props: {
            state_first: {
                type: Object,
                default: () => ({
                  id: '',
                  text: ''  
                })
            },
            state_second: {
                type: Object,
                default: () => ({
                  id: '',
                  text: ''  
                })
            },
        },
        components: {
            DefaultButton
        },
        methods: {
            changecurrentstate: function(index) {
                if(this.current_active_state != index) {
                    if(this.current_active_state == 1){

                        this.$set(this.state_first, 'state', "BUTTON_ACTIVE_NOT_CHOSEN");
                        this.$set(this.state_second, 'state', "BUTTON_ACTIVE");

                    } else {

                        this.$set(this.state_first, 'state', "BUTTON_ACTIVE");
                        this.$set(this.state_second, 'state', "BUTTON_ACTIVE_NOT_CHOSEN");

                    }
                    this.current_active_state = index;
                }
            },
        },
        created: function () {
            this.state_first.state = 'BUTTON_ACTIVE';
            this.state_second.state = 'BUTTON_ACTIVE_NOT_CHOSEN';
        }
    }
</script>

{{this.state_first.state}}
{{this.state_second.state}}
{{this.current_active_state}}
或
从“../Button/DefaultButton”导入DefaultButton
导出默认值{
名称：“changestatebox”，
数据（）{
返回{
当前活动状态：1
}
},
道具：{
首先说明：{
类型：对象，
默认值：（）=>({
id:“”，
文本：“”
})
},
第二州：{
类型：对象，
默认值：（）=>({
id:“”，
文本：“”
})
},
},
组成部分：{
默认按钮
},
方法：{
changecurrentstate:函数（索引）{
if（this.current\u active\u state！=索引）{
if（this.current\u active\u state==1）{
this.$set（this.state_first，'state'，'BUTTON_ACTIVE_NOT_selected'）；
this.$set（this.state_second，'state'，'BUTTON_ACTIVE”）；
}否则{
this.$set（this.state_first，'state'，'BUTTON_ACTIVE”）；
this.$set（this.state_second，'state'，'BUTTON_ACTIVE_NOT_selected'）；
}
this.current\u active\u state=索引；
}
},
},
已创建：函数（）{
this.state_first.state='BUTTON_ACTIVE'；
this.state_second.state='BUTTON_ACTIVE_NOT_selected'；
}
}

。它要么是一个道具名称数组，要么是一个对象，每个道具一个条目声明其类型，要么是一个对象，每个道具一个条目声明多个属性

你有

    props: {
        state_items: []
    },

但这是应该的

    props: {
        state_items: {
            type: Array,
            default: []
        }
    },

---

但是您的问题很可能是您正在以这样一种方式变异

状态_项

，

您的主要问题是更改按钮状态的方式，vue无法通过索引检测变异

由于JavaScript的限制，Vue无法检测到以下内容 对数组的更改：

当您直接使用索引设置项目时，例如。

vm.items[indexOfItem]=newValue

当您修改 数组，例如

vm.items.length=newLength

---

如果有人会遇到同样的问题：

@Roy J和@DobleL都是对的

这个问题背后的原因与状态对象的错误初始化有关

根据文件：

Vue cannot detect property addition or deletion. 
Since Vue performs the getter/setter conversion process during instance
initialization, a property must be present in the 
data object in order for Vue to convert it and make it reactive. 

在阅读这句话之前，我通常从以下对象开始作为初始数据：

var local_state_first = {
  id: '1',
  text: 'Realized',
};

var local_state_second = {
    id: '2',
    text: 'Active'  
};

它的正确版本如下所示：

var local_state_first = {
  id: '1',
  text: 'Realized',
  state: 'BUTTON_ACTIVE'
};

var local_state_second = {
  id: '2',
  text: 'Active',
  state: 'BUTTON_ACTIVE'
};

鉴于声明主要组件为：

<change-state-box :state_first="local_state_first" :state_second="local_state_second" @buttonAction="onbuttonAction"/>

---

其余代码保持不变（请看我的主要帖子中的@edit mark）

您已声明道具错误

defaultbutton

应该是一个对象，而

required

应该是该对象中的一个条目。好吧，我现在对其进行了更改，使

required

不再存在，但结果是一样的-defaultbutton的工作方式似乎与父对象的数据无关

var local_state_first = {
  id: '1',
  text: 'Realized',
  state: 'BUTTON_ACTIVE'
};

var local_state_second = {
  id: '2',
  text: 'Active',
  state: 'BUTTON_ACTIVE'
};

<change-state-box :state_first="local_state_first" :state_second="local_state_second" @buttonAction="onbuttonAction"/>