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

Posted 2023-02-23

【中文标题】vue.js：如何在转义内容中转义变量

【英文标题】：vue.js: how to escape variable in escaped content

【发布时间】：2020-06-24 07:36:47

【问题描述】：

我正在使用 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 ，一切都很好。

【问题讨论】：

我的问题是你为什么需要 myStatusObject. site .someString 的逻辑？你想代表什么价值？

站点变量为我提供了myStatusObject中的正确键，通过它我可以得到someString的值

您是否考虑过调用一个可以为您执行此操作的方法？从而消除逃跑的情况？

是的，但我试图避免这种情况。我认为这在 vue2 中应该是可能的，但也许我错了......这将是 vue3 的一个很好的功能请求:)

转义是什么意思？您需要哪种类型的转义（有几种）？从表面上看， myStatusObject[site].someString 似乎是您所要求的，您能否解释一下为什么这不起作用？

【参考方案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>

【讨论】：

看看我的帖子，这是我最初的想法之一......不起作用。 :)

嗨，我认为这可能是异步数据的问题。我正在通过 for 循环（对于每个站点）运行多个 axios 调用，由事件通过 EventBus（-> 挂载）触发。这是一个非常复杂的场景，不知何故我的数据对象并不总是完整的。我正在将此问题设置为已解决，因为这是 for 循环中的 axios 问题。 :)