CODEWITHSUNDEEP
javascripthtmlintellij-ideavue.jsvuejs2
Axel
Axel

Reputation: 81

Vue.js tag as invalid HTML

My Vue variable is defined as a invalid HTML tag. How do i prevent this and how can i use my Vue.js variables?

I get this error: attribute v-bind is not allowed here, The inspection highlight unknown HTML tag attributes as invalid, and lets mark such attributes as custom to avoid highlighting them as invalid

I use 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>

Upvotes: 0

Views: 1883

Answers (4)

Zeta11
Zeta11

Reputation: 881

What helped me with the error was changing <html> to <!DOCTYPE html>

Upvotes: 0

maba
maba

Reputation: 48075

The problem seems to be the colon. You can write like this instead:

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

That will work in IntelliJ.

Upvotes: 0

Sovalina
Sovalina

Reputation: 5609

Your code works (see snippet). Just be sure Vue is well defined.

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>

Upvotes: 1

B&#225;lint Budav&#246;lgyi
B&#225;lint Budav&#246;lgyi

Reputation: 548

You can add a data- prefix before it to make it a valid html attribute.

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

Upvotes: 0

Related Questions