vue. js: как экранировать переменную в экранированном контенте - PullRequest
Новая
       16

vue. js: как экранировать переменную в экранированном контенте

1 голос
/ 12 марта 2020

Я использую 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" }, ...
}

, где "ab c" и "def" - сайты. Звонок myStatusObject[site].someString не работает. Я должен быть в состоянии получить доступ к объекту сайта, сбежав без необходимости секунды для l oop.

Если я жестко кодирую {{ myStatusObject.abc.someString }} для целей тестирования, все в порядке.

1 Ответ

1 голос
/ 12 марта 2020

Используя этот синтаксис {{ myStatusObject[site].someString }}, он работает нормально, я думаю, что у вас проблема с 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>
...