Vue: Object keys which include dashes

[bananatron]

Not sure if I'm missing something here, but I couldn't find anything in the docs or googling around.

Vue.js version

1.0.26

Reproduction Link

http://codepen.io/spenser/pen/AXxQyG?editors=1011

Steps to reproduce

Try to set an object property (which isn't previously defined) with a key beginning with a dash.

What is Expected?

It's expected that it would work like any other string.

What is actually happening?

Nothing is set. This is problematic specifically when dealing with Firebase, where when you push data, the keys coming back predominantly start with dashes and you'd ideally like to keep both Vue and your data store in sync (from what I've seen of Vuefire, it assumes your paths are static, and you aren't appending to objects in your store). I understand foreign characters that don't work as default property names might be problematic, but I'm just throwing this out there in case there's another solution.

[LinusBorg]

Hi @bananatron ,

thanks for filing this issue.

While we check out how to resolve this, a workaround would be:

Vue.set(testThing.anobject,'-K1l', "This does work")

[LinusBorg]

So the reason this doesn't work is this line

const pathTestRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['.*?'\]|\[".*?"\]|\[\d+\]|\[[A-Za-z_$][\w$]*\])*$/

This regular expression is used to parse these paths, and it does not allow for keys to start with a dash.

Now on to figuring out weither there's a reason for this (i.e. allowing it makes parsing unreliable or sth.).

[yyx990803]

anobject.-K1 is not a valid JavaScript path. You should be using anobject["-K1"].

[bananatron]

@yyx990803 But when you do that with a vue object, it seems to think you're setting an index of an array and sets the index to Nan?

Also, if you view my example I believe that's what I'm doing?

[yyx990803]

@bananatron ...that's how you set object keys that are non-valid identifiers in JavaScript. It's different from what you are doing.

[bananatron]

@yyx990803 I understand that's how you can set properties, but I believe that's what I was doing on this line

testThing.anobject['-K1l']

Using that notation is what doesn't work for Vue objects. Can you provide an example of how to set a vue object with a key that starts with a dash?

[itsMapleLeaf]

When you use vm.$set, it uses regular old javascript notation, so doing vm.$set('anobject.-K11', value) is the same as vm.anobject.-K11 in JS, which doesn't make a lot of sense. @LinusBorg gave you the solution in his first reply.

[bananatron]

Got it - thanks for all you guy's help!

[fabd]

I don't know if anybody 's reading this still... ? I have a related problem:

I just put a property in a Vue instance with a name like "image-src". I quoted it so it's valid Javascript key:

<img v-bind:src="image-src"  (etc)

...in the Vue code:

data: {
  'image-src': 'http://....'
}

For some reason, VueJs doesn't bind it. If I remove the dash, it works.

There is a section in the docs about kebab-case and camelCase but it seems unrelated. Any idea why this doesn't work?

[fnlctrl]

@fabd Because v-bind expects a javascript expression, and you can't use - in identifiers. If you really want to use -, you can use v-bind:src="this['image-src']" because this is accessible in templates.

[kolchurinvv]

@fnlctrl Thank you so much!! I've been looking for this kebab notation workaround for the last 5 hours!!! we need more docs on this, i think :)

[julienreszka]

@fnlctrl thank you !
For people wondering how to do it with an object in data that looks like this

message: {
"img-src-lol":"https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg"
}

you do it like this
:src="this.message['img-src-lol']"