Vue-good-table: Selecting rows programatically

[rubenriskpossible]

Selecting rows programatically

How can I selecting rows programatically?

Specs

v2.15.3
Google Chrome

Hi there.
I was wondering how to select rows programatically, I mean, is there any option like "select by id" or "by value"?

I have tried to do something like:

Code Start
this.$refs['my-table'].selectedRows = [ myObjects[0] ];
Code End

Where myObjects is a collection of data-rows binded to the table, but when I try that I receive this error message.

Computed property "selectedRows" was assigned to but it has no setter.
found in
--->

Thanks in advance.
Regards

[ow-en]

How are you going about selecting the row(s)? If you're using a click event to select the row(s), you could setup something like this:

            onRowClick: function (params) {
                this.selectedAccount = params.row;
            },

If you're using a checkbox table (which I suspect) to select rows, see this section from the docs:

<vue-good-table
  @on-selected-rows-change="selectionChanged"
  :columns="columns"
  :rows="rows"
  :select-options="{ 
    enabled: true,
  }"
  :search-options="{ enabled: true }">
  <div slot="selected-row-actions">
    <button>Action 1</button>
  </div>
</vue-good-table>
<!-- click on a row below to show the action button -->

I believe you would need to use an event in either case - for the checkbox table, it would be @on-selected-rows-change as seen above. You can likely use that selection event to pass the selected rows into your [ myObjects[0] ]

[xaksis]

thanks @owensource

@rubenriskpossible if you want to select rows programmatically, you can use the rows' internal property vgtSelected, just remember vue's reactivity caveat so you'd have to do something like:

this.$set(this.rows[0], 'vgtSelected', true);

that will select the first row.

closing. Let me know if you have an issue with this, I'll re-open.

[MohitDeshwal]

thanks @owensource

@rubenriskpossible if you want to select rows programmatically, you can use the rows' internal property vgtSelected, just remember vue's reactivity caveat so you'd have to do something like:

this.$set(this.rows[0], 'vgtSelected', true);

that will select the first row.

closing. Let me know if you have an issue with this, I'll re-open.

Doing this doesn't work. Nor it fires event nor updates selected rows.

[MohitDeshwal]

For Clarification purpose here is whats desired:

Flow -> User makes a selection -> we save selection data to database ;
ThenIf -> (User needs to change selection) we present table re initialised with same data/selected rows.

[MohitDeshwal]

Could anyone please respond? Is it possible?

[zacharytyhacz]

Yes I want to know to know how to do this as well also.

[xaksis]

@MohitDeshwal, @zacharytyhacz
Not sure how you are trying this. But here's an example to show that this does work.
https://jsfiddle.net/aks9800/keLjcssn/