Updating query params and tracked properties

Ember CLI
1

I’m trying to pass filter values to an input component and have the query params update in real time.

I don’t understand how to link the input changes to the query params. The input is initialized from the current params.

Do I need to use an input action to manually update the param each time?

I’m having trouble thinking through this any further. Help much appreciated.

url: https://xxxx.com?search=yellow&price=1000to5000&year=1995to (params can be search or a range of values seperated by ‘to’)

Controller:

class MinMaxValue {
  @tracked min;
  @tracked max;

  constructor(param) {
    const minMax = param.split('to');
    this.min = minMax[0];
    this.max = minMax.length === 2 ? minMax[1] : '';
  }

  get param() {
    const param = `${this.min}to${this.max}`
    return param === 'to' ? '' : param;
  }
}

// Holds the filters
class Filter {
  @tracked search;
  @tracked price;

  constructor(search, price, year) {
    this.search = search;
    this.price = new MinMaxValue(price);
  }
}

export default
class ListingController extends Controller {
  queryParams = ['search', 'price'];
  search = '';
  price = '';
  
  @tracked filter = new Filter(this.search, this.price);
}

Component:

<Input @value={{@filter.search}} />
<Input @value={{@filter.price.min}} />
<Input @value={{@filter.price.max}} />

Doing something like the following gets into an infinite loop:

  @computed('filter.price.param')
  get price() {
    return this.filter.price.param;
  }

A plain getter doesn’t update?