vue.js：如何在转义内容中转义变量

Question

我正在使用 vue2，我需要在转义内容中转义一个变量。 听起来很奇怪，但这段代码会澄清（一行中的表格单元格）：

<tr v-for="(site, siteIndex) in mySites" :key="siteIndex">
    <td>
      <b-tag>
         {{ myStatusObject.{{ site }}.someString }}
      </b-tag>
    </td> 
    ...

我需要转义转义内容中的site变量。

我怎么做 ？

标准文档只涵盖简单的情况，这似乎更高级，也许（还）在 vue2 中不可能？

请帮忙 ：）

PS：使用类似的东西

{{ myStatusObject[site].someString }}

不起作用。 我需要逃离site 。

我的 myStatusObject 看起来像这样：

{
  abc: { someString: "test1" },
  def: { someString: "test2" }, ...
}

其中“abc”和“def”是站点。 调用myStatusObject[site].someString不起作用。 我应该能够通过转义访问站点对象，而无需第二个 for 循环。

如果我硬编码{{ myStatusObject.abc.someString }}用于测试目的，一切都很好。

Answer 1

使用此语法{{ myStatusObject[site].someString }}可以正常工作，我认为您的bootstrap-vue配置有问题：

 // ignore the following two lines, they just disable warnings in "Run code snippet" Vue.config.devtools = false; Vue.config.productionTip = false; new Vue({ el: '#app', data() { return { sites: ["abc", "def"], myStatusObject: { abc: { someString: "test1" }, def: { someString: "test2" }, } }; } });

 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <!-- Load polyfills to support older browsers --> <script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script> <!-- Load Vue followed by BootstrapVue --> <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <!-- Load the following for BootstrapVueIcons support --> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>> <div id="app" class="container"> <table class="table-striped"> <tbody> <tr v-for="(site,index) in sites"> <td> <b-tag> {{ myStatusObject[site].someString }} </b-tag> </td> </tr> </tbody> </table> </div>