Update dynamic components disabled state based on Vuex state value

Question

I have no idea if what I'm doing is correct or not, but here's a simplified version of what I'm trying to do:

I want to have 3 file inputs, with the 2nd and 3rd disabled until the 1st one has had a file selected.

I've tried to do is set the Vuex state variable to whatever the first file input is has selected, but upon doing that the other 2 inputs don't update their disabled state.

I have some file inputs that are created dynamically, like so:

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)
            }
        }
    }
}

The data for the component is from the instance:

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

Now, notice the "dependsOn". In the Vuex store, I have a corresponding state item:

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;
        }
    }
});

Now, the above works when everything is first initialized. But once the first input has something selected, the other two inputs don't change.

I'm not sure how to update the bindings once a mutation of the state occurs.

In your computed property you reference item.item.dependsOn..., but you have no data object with an item property defined on the instance. Are you accessing a property that doesn't exist? — Len Joseph
@LenJoseph Sorry, that's a left-over from my actual code. It's more complicated than this, involving a loops to create the elements, with nested elements inside those (basically creating a nested navigation). I have checked, though, and it is passing/accessing the correct property. Like I mentioned, the disabled property is being set correctly on page load. It's just after the store updates that it doesn't. — Kurt
Actually, I'm not sure if it's setting the state correctly: "state.files.fileOne" is undefined prior to setting it, rather than null (or any value I give it). — Kurt
you have no images object in your state, I only see files. — Len Joseph

Len Joseph Len Joseph · Accepted Answer · 2019-06-07T19:47:41

I think you need to refactor your mutation to make the state property mutable, like this:

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

Update dynamic components disabled state based on Vuex state value

2 Answers