Vue.js: why is the document not being generated?

I

Illia T2019-10-24 06:28:55

Vue.js

Illia T, 2019-10-24 06:28:55

For a fraction of a second, the document is generated and disappears. This is clearly related to the v-else-if directive

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>

</head>
<body>

<div id="app">
  <h2 v-if="letter==='a'">a</h2>
  <h2 v-else-if="letter==='b'">b</h2>
  <h2 v-else-if="letter===='c'">c</h2>
  <h2 v-else>not match</h2>
  <hr>
  <input type="text" v-model="someinput">
  <h2>{{mes}}</h2>
  
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript">
  new Vue ({
  el: '#app',
  data: {
    someinput:'a',
    mes:'Hy there'
  }
})

</script>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

Sergey Sokolov, 2019-10-24
@illiatovpeko

Syntax error: extra 4th equal sign for "c".
And, most importantly, the variable letterwas not defined.
It is necessary to make both the model and the variable v-ifthe same:
snippet

E

Evgeny Kylin, 2019-10-24
@palkan_karabov

new Vue ({
  el: '#app',
  data: {
    someinput:'a',
    mes:'Hy there',
    letter: 'a'
  }