Специальный символ в index.html в Vuejs

Question

Мне нужно поместить два текста таким образом в мой index.html:

<div style="margin-top:50px" class="text-right">
  Version: <b>${display_version}</b> - Release:<b>${buildNumber}</b>
</div>

Но когда я запускаю свое приложение, я получаю сообщение об ошибке:

Template execution failed: ReferenceError: buildNumber is not defined
    ReferenceError: buildNumber is not defined
  - index.html:4 eval
    [.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:4:10
  - index.html:7 module.exports
    [.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:7:3
  - index.js:284 Promise.resolve.then
    [cotador-vida-global-frontend]/[html-webpack-plugin]/index.js:284:18
  - next_tick.js:189 process._tickCallback
    internal/process/next_tick.js:189:7

Как поставитьэто предложение (${display_version} / ${buildNumber}) в vuejs?

Answer 1

Полагаю, вам нужно инициализировать эти переменные.

new Vue({
  el: '#app',
  data: {
    display_version:"123",
    buildNumber: "456"
    
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div style="margin-top:50px" class="text-right">
    Version: <b>{{display_version}}</b> - Release:<b>{{buildNumber}}</b>
  </div>
</div>