Question

我不知道我在做什么，是否正确，但这是我要做的事情的简化版本：

我想有3个文件输入，禁用第2个和第3个输入，直到第一个选择了文件。

我试图将Vuex状态变量设置为选择的第一个文件输入，但是这样做之后，其他2个输入不会更新其禁用状态。

我有一些动态创建的文件输入，例如：

Vue.component('file-input', {
    props: ['items'],
    template: `<div><input type="file" v-on:change="fileSelect(item)" v-bind:id="item.id" v-bind:disabled="disabledState"></div>`,
    methods: {
        fileSelect: function(item) {
            store.commit('fileSelect', file);
        }
    },
    computed: {
        disabledState: function (item) {
            return {
                disabled: item.dependsOn && store.getters.getStateValue(item.dependsOn)
            }
        }
    }
}

该组件的数据来自实例：

var vm = new Vue({
    data: {
        items: [
            { text: "One", id: "selectOne" },
            { text: "Two", id: "selectTwo", dependsOn: "fileOne" },
            { text: "Three", id: "selectThree", dependsOn: "fileOne" }
    }
});

现在，请注意“ dependsOn”。在Vuex商店中，我有一个对应的状态项：

const store = new Vuex.Store({
    state: {
        files: [
            {
                fileOne: null
            }
        ]
    },
    mutations: {
        fileSelect(state, file) {
            state.files.fileOne = file;
        }
    },
    getters: {
        getStateValue: (state) => (stateObject) => {
            return state.files.findIndex(x => x[stateObject] === null) === 0 ? true : false;
        }
    }
});

现在，上面的内容在所有内容都首次初始化时起作用。但是一旦选择了第一个输入，其他两个输入就不会更改。

我不确定一旦状态发生突变，如何更新绑定。

Answer 1

我认为您需要重构突变以使状态属性可变，例如：

fileSelect(state, file) {
  Vue.set(state.files[0].fileOne, file);
}

Answer 2

好吧，我知道了...

因为我的状态对象是对象数组，所以我不能仅使用RAD更改属性值之一。我需要做state.files.fileOne。

根据Vuex状态值更新动态组件禁用状态

2 个答案: