How to do string interpolation in template element in Vue.js?

Question

I am iterating through a dictionary (called in from a .json file) and would like to check an attribute of my props with a value in the dictionary. In my first div I am setting the variable attribute to be one of the values in the dictionary. This attribute variable has the value "event" which is exactly what I want.

In the inner div, the props.item.${attribute} code is not evaluating to props.item.event, which is what I thought it would. Is there any way to interpolate the value of this variable to my props statement?

<div
  v-for="data in dict"
  :set="attribute = data.targetAttr"
>             
  <div v-if="props.item.attribute == data.key">
    <a
      :href="data.response"
      target="_blank"
    >
      More Info
    </a> 
  </div>
</div>

I have tried looking at the resource here, but the answer is only in relation to effectively mapping over lists, which is not exactly my problem. VueJs - How to use variable in v-if?

kissu · Accepted Answer · 2022-11-06 01:53:43Z

2

In that case, you should try the following

<div v-if="props.item[attribute] === data.key">

answered Nov 6, 2022 at 1:53

kissu

47.3k16 gold badges94 silver badges196 bronze badges

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

Collectives™ on Stack Overflow

How to do string interpolation in template element in Vue.js?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related