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

Question

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

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

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

我该怎么做？

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

请帮忙:)

P.S.：使用类似的东西

{{ 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>