vue.js: how to escape variable in escaped content

Question

I'm using vue2 and I need to escape a variable inside escaped content. Sounds strange, but this code will clarify (table cell inside a row):

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

I need to escape the site variable inside the escaped content.

How do I do that ?

The standard documentation only covers simple cases, this seems to be more advanced and maybe not (yet) possible in vue2 ?

Please help :)

P.S.: Using things like

{{ myStatusObject[site].someString }}

doesn't work. I need to escape site.

My myStatusObject looks like this:

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

where "abc" and "def" are the sites. Calling myStatusObject[site].someString doesn't work. I should be able to access the site object by escaping without the need of a second for loop.

If I hardcode {{ myStatusObject.abc.someString }} for testing purposes everything is fine.

Answer 1

Using this syntax {{ myStatusObject[site].someString }} it's works fine, I think you've an issue with bootstrap-vue config :

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