EmberJS - Assertion Failed: computed expects a function or an object as last argument

Question

Trying to use ember-models-table 3.x but facing an issue with "Assertion Failed: computed expects a function or an object as last argument."

ember-cli: 3.9.0

node: 10.16.1

Create a brand new ember project and updated the files below,

routes/test.js

import Route from '@ember/routing/route';
import {A} from '@ember/array';

export default Route.extend({
  setupController(controller) {
    controller.set('columns', A([
      { propertyName: 'index' },
      { propertyName: 'firstName' },
      { propertyName: 'lastName' },
      { propertyName: 'age' },
      { propertyName: 'city' }
    ]));
    controller.set('data', A({
      data: [
        { id: 1, type: 'movies', attributes: { name: 'Interstellar' } },
        { id: 2, type: 'movies', attributes: { name: 'Inception' } },
        { id: 3, type: 'movies', attributes: { name: 'Dunkirk' } },
      ]
    }));
  }
});

templates/test.hbs

<ModelsTable @data={{data}} @columns={{columns}} />

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('test');
});

export default Router;

Error

index.js:163 Uncaught Error: Assertion Failed: computed expects a function or an object as last argument.
    at assert (index.js:163)
    at new ComputedProperty (metal.js:2757)
    at computed (metal.js:3220)
    at Module.callback (models-table.js:192)
    at Module.exports (loader.js:106)
    at Module._reify (loader.js:143)
    at Module.reify (loader.js:130)
    at Module.exports (loader.js:104)
    at requireModule (loader.js:27)
    at Class._extractDefaultExport (index.js:426)

real_ate real_ate · Accepted Answer · 2019-08-16T11:01:41

It looks like you might have a slight typo in your Route 🤔 oh and Hey @moustacheman, thanks for your question 👋

In your example you're trying to set columns and data as two arrays on your controller. The columns looks to be done right, but for data you're not passing an array into A() but instead you're passing an object that has a data parameter. I would update your example to:

import Route from '@ember/routing/route';
import {A} from '@ember/array';

export default Route.extend({
  setupController(controller) {
    controller.set('columns', A([
      { propertyName: 'index' },
      { propertyName: 'firstName' },
      { propertyName: 'lastName' },
      { propertyName: 'age' },
      { propertyName: 'city' }
    ]));
    controller.set('data', A([
      { name: 'Interstellar' },
      { name: 'Inception' },
      { name: 'Dunkirk' },
    ]));
  }
});

Edit: I also removed the id and type structure that was part of the JSON:API spec because it's not relevant with the example that you're showing here. Also it's worth noting that you're setting columns index, firstName etc. but you only have the property name on the data. If you gave a more full example with a minimal reproduction I could make it work without any issue.

EmberJS - Assertion Failed: computed expects a function or an object as last argument

1 Answers