Vue.js тег как недействительный HTML

Question

Моя переменная Vue определена как недопустимый тег HTML. Как я могу предотвратить это и как я могу использовать мои переменные Vue.js?

Я получаю эту ошибку: атрибут v-bind здесь не разрешен, проверка выделяет неизвестные атрибуты HTML-тега как недействительные и позволяет помечать такие атрибуты как пользовательские, чтобы избежать выделения их как недействительных

Я использую Intellij

<script  src="../../static/js/vue.js"></script>

<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>

<script>
var app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'You loaded this page on ' + new Date().toLocaleString()
    }
})
</script>

Answer 1

Ваш код работает (см. Фрагмент). Просто убедитесь, что Vue хорошо определена.

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'You loaded this page on ' + new Date().toLocaleString()
    }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app-2">
  <span v-bind:title="message">
      Hover your mouse over me for a few seconds to see my dynamically bound title!
  </span>
</div>

Answer 2

Кажется, проблема в двоеточии.Вместо этого вы можете написать так:

<span v-bind="{title: message}">

Это будет работать в IntelliJ.

Answer 3

Вы можете добавить префикс data- перед ним, чтобы сделать его действительным атрибутом html.

<span data-v-bind:title="message">