Determining a checkbox checked state in a data table row

Support
1

I have a data table that I am successfully adding values to an array in my model with a named action.
This is my row:

<input type="checkbox" @click.stop="namedAction ('updateAssetList', {AssetChoice: props.row.AssetID})">

This is my named action:

var AssetChoice = action.options.AssetChoice

var index = _.findIndex(model.AssetList, function(element) { return element == AssetChoice; });

if (index === -1){
    model.AssetList.push(AssetChoice)
}
else{
    model.AssetList.splice(index, 1)
}

This works well. My problem is that the checked checkbox depends on the row. If I check the first row on page one, when I go to the next page, it shows the first row checked. I want to be able to show the row as checked when the AssetID is in the AssetList array and not checked when not in the array. How do I do that?

2

You can give you checkbox a checked attribute that’s conditional based on whether or not the AssetID of that row exists in the AssetList array:

<input type="checkbox" @click.stop="namedAction ('updateAssetList', {AssetChoice: props.row.AssetID})" :checked="_.findIndex(model.AssetList, function(element) { return element == row.AssetID; }) > -1">
3

That did it. Thank you, easy and simple.

1 Like