CODEWITHSUNDEEP
javascriptvue.js
luki512
luki512

Reputation: 237

Multiple dynamic HTML parameters in Vue

i want to assign an array of params and values to an html container like in this example:

let myParams = ['param1', 'param2', 'param2];
let myValues = ['val1', 'val2', 'val3'];
<div :[myParams]="myValue"></div>

The ouptput should be:

<div param1="val1" param2="val2" param3=val3"></div>

Would be great if anyone of you knows a solution for this one.

Best regards!

Upvotes: 2

Views: 748

Answers (2)

Qonvex620
Qonvex620

Reputation: 3972

It is often a good idea to bind to a attributes object directly so that the template is cleaner

data(){
  return {
    multipleAttributes:[{param1:'val1'},{param2:'val2'},{param3:'val3'}]
  }
}

and bind to your div tag

<div v-bind="multipleAttributes"></div>

read docs here muiltple values

Upvotes: 1

KingGary
KingGary

Reputation: 638

This should be helpful: https://alligator.io/vuejs/passing-multiple-properties/

You can use v-bind to bind multiple parameters. To do that, you should merge your arrays into one object and then bind this object.

Something like that:

let data = {
  param1: 'val1',
  param2: 'val2',
  param3: 'val3'
}
<div v-bind="data"></div>

Upvotes: 1

Related Questions