Vue.js模板中字符串插值及动态访问props属性的方法

你遇到的核心问题是点语法无法解析变量作为属性名——props.item.attribute是在访问props.item里名为"attribute"的属性，而不是变量attribute的值（比如你说的"event"）对应的属性。Vue里要通过变量动态访问属性，得用方括号语法。

另外要注意：Vue没有内置的:set指令，你写的:set="attribute = data.targetAttr"是无效的，根本不会把值赋给attribute变量。

给你两种修正方案：

方案一：直接使用data.targetAttr（最简洁） #

不需要额外定义变量，直接在条件里用方括号访问对应属性：

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

方案二：在循环作用域中定义变量（如果需要复用） #

如果一定要用attribute变量，可以借助template的作用域来临时定义，写法如下：

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

核心逻辑就是：动态属性名必须用方括号[]包裹变量，而不是点语法。另外记得去掉无效的:set指令，Vue里没有这个内置语法。

内容的提问来源于stack exchange，提问作者FrenchToast