How to change selected feature

[mrAbra]

thats my map

<ol-map style="height: 400px">
      <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection"
        @change:center="centerChanged" @change:resolution="resolutionChanged" @change:rotation="rotationChanged" />
      <ol-tile-layer>
        <ol-source-osm />
      </ol-tile-layer>
      <ol-interaction-select @select="featureSelected" :pointRadius="20">
      </ol-interaction-select>
      <ol-animated-clusterlayer :animationDuration="500" :distance="40" ref="customInteraction">
        <ol-source-vector :features="geoJsonFeatures" :format="geoJson">
        </ol-source-vector>
      </ol-animated-clusterlayer >
    </ol-map>

thats my table for showing features.

<el-table :data="geoJsonFeatures" highlight-current-row 
@current-change="handleCurrentChange" style="width: 100%" :row-class-name="setDeviceStatusInTable">
<el-table-column type="expand">
....
async function handleCurrentChange(val) {
  if (val == null) {
    return;
  }
  selectedFeature.value = val;
}

I dont understand how to change selected feature from handleCurrentChange. I will be glad to any advice

[mrAbra]

selectedFeature.value im using this for another element but wiil be realy cool if i can do smth like this mapreference.interactionSelect.removeSelectedFeature(): mapreference.interactionSelect.addSelectedFeature(selectedFeature.value );

[d-koppenhagen]

Please take the time and provide a formatted code example which makes it easy to follow and investigate.

[mrAbra]

  <ol-interaction-select @select="featureSelected" :pointRadius="20" ref="customInteraction">
    <!-- style of the marked selected from the cluster items after first click on the cluster itself -->
    <ol-style>
      <ol-style-circle :radius="20">
        <ol-style-fill color="#ff0000"></ol-style-fill>
      </ol-style-circle>
    </ol-style>
  </ol-interaction-select>
  <ol-animated-clusterlayer :animationDuration="500" :distance="40" ref="clusterLayer">
    <ol-source-vector :features="geoJsonFeatures" :format="geoJson" ref="vectorLayer">
    </ol-source-vector>
  </ol-animated-clusterlayer>
....
      <el-table  ref="tableRef" :data="geoJsonFeatures" highlight-current-row @current-change="handleCurrentChange" style="width: 100%"
        :row-class-name="setDeviceStatusInTable">
....
    const providerFeatureCollection = {
      type: "FeatureCollection",
      features: newFeatures,
    };

    geoJsonFeatures.value = geoJson.readFeatures(providerFeatureCollection);

...
async function handleCurrentChange(val) {
  if (val == null) {
    return;
  }
  selectedFeature.value = val;
  const selectedStyle = new Style({
    image: new Icon({
      src: workerIcon,
      anchor: [0.5, 1],
      width: 30,
      height: 30
    })
  });

  customInteraction.value.select.getFeatures().clear()
  customInteraction.value.select.getFeatures().push(vectorLayer.value.layer.features.find((f) => {
    return f.getProperties().features[0].values_.devaddr === val.values_.devaddr;
  }));
  customInteraction.value.select.getFeatures().forEach(function (feature) {
    feature.setStyle(selectedStyle);
  })
}

working for me, May be someone can find better solution with easier properties access. For me was not obvious that geoJsonFeatures not equal select event collection elements