riot/compiler

Cannot access object property within template, key is not defined

Closed this issue · 1 comments

bradisbell commented

Suppose I have a simple loop:

<button each="{key in  ['a', 'b', 'c']}">{state.test[key].text}</button>

With the following state:

      state: {
        test: {
          a: {text:'A Text'},
          b: {text:'B Text'},
          c: {text:'C Text'}
        }
      }

I would expect to see three buttons titled, "A Text", "B Text", and "C Text". Instead, I get a browser error:

Uncaught (in promise) ReferenceError: key is not defined

That seems to be due to Riot.js not understanding how to handle key. I think it should be replaced with scope.key. Instead, this is what turns up in the compiled template:

          'evaluate': function(scope) {
            return scope.state.test[key].text;
          }

Interestingly enough though, if you remove the need for the .text property, the loop works as expected.

  1. Can you reproduce the issue?

https://next.plnkr.co/edit/1GKbFAW5FY0oabgD

  1. On which browser/OS does the issue appear?

Chrome on Windows

  1. Which version of Riot does it affect?

v4

  1. How would you tag this issue?
  • Question
  • Bug
  • Discussion
  • Feature request
  • Tip
  • Enhancement
  • Performance
GianlucaGuarini commented

thank you @bradisbell it's a compiler issue and I am on it. I will transfer the issue to the proper repo

  • 🎉2