Add attributes to element from JSON using Vue.js

Question

I am using Vue.js V1 and want to take some JSON like this:

{ "class": "foo bar", "max-length": 25 }

And map it to an element so something like this:

<input type="text" {{ json }} />

And that renders as:

<input type="text" class="foo bar" max-length="25" />

I have tried this with a method <input type="text" {{ convertJSON(json) }} /> where convertJSON creates a string from the JSON. This doesn't work. When I transpile with it vueify it gives me the error “Found camel case attribute”.

Is this possible with Vue?

EDIT: I want to do it without having to go through each attribute manually; I already know how to bind them. I wondered if it was possible to do it dynamically. I suspect it isn't but wanted to check.

Thanks.

tony19 · Accepted Answer · 2022-07-15 21:44:47Z

3

You can pass an object of attributes to v-bind. This works in v1 and v2.

In your case, assuming json is the JSON object:

<input type="text" v-bind="json" />

Here's an example fiddle.

edited Jul 15, 2022 at 21:44

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 5, 2017 at 13:03

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Frnak · Accepted Answer · 2017-02-23 09:33:15Z

0

This syntax will most probably fail - vue is run after html is rendered - you will already have major html problems here because it will try to interpret {{ json }} as html attributes.

However you can always bind you data

<div v-bind:class="myJson.class" v-bind:max-length="myJson['max-length']">
...

If you are really interest in binding everything with one json you can simply create a component that wraps a basic input like

<template>
    <inputv-bind:class="data.class" v-bind:max-length="data['max-length']">
</template>

And define a single prop here

// .. component definition
props: ['data'], 
// ..

answered Feb 23, 2017 at 9:33

Frnak

6,8626 gold badges38 silver badges74 bronze badges

Comments

Fisch · Accepted Answer · 2017-02-23 10:28:10Z

0

You can create a custom directive that takes the json as a parameter and automatically turns each key-value pair into an arrtibute on the element.

answered Feb 23, 2017 at 10:28

Fisch

3,8151 gold badge30 silver badges38 bronze badges

1 Comment

thanksd Over a year ago

This is exactly what v-bind does when you pass it an object, no need for a custom directive.

solarhell · Accepted Answer · 2017-02-24 01:17:56Z

0

Just use v-bind.

For example

<input type="text" v-bind:class=[myClass] v-bind:maxlength=[myLength] />

data: {
  myClass: 'foo',
  myLength: 25
}

```

Live Example

edited Feb 24, 2017 at 1:17

answered Feb 23, 2017 at 9:33

solarhell

1819 bronze badges

Collectives™ on Stack Overflow

Add attributes to element from JSON using Vue.js

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related