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

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?

CodePudding user response：

In that case, you should try the following

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