vue.js:如何对转义内容中的变量进行转义

Question

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

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

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

我该怎么做？

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

请帮助：(

附言：使用之类的东西

{{ myStatusObject[site].someString }}

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

我的myStatusObject如下所示：

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

其中"abc"one_answers"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>