I am trying to display vue within an HTML. It worked properly with the vue cli but now that I am trying to integrate it in a bare HTML file, CSS doesn’t work properly anymore. It might as well has to do with the bindings of vue since the shown bar should repeat three time, but is only shown once. I don’t get any error in the console so I’m clueless. Any help is appreciated!
how it looked like with vue cli
JavaScript
x
142
142
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>2
<!DOCTYPE html>3
<html>4
<head>5
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">6
<meta content="utf-8" http-equiv="encoding">7
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>8
<title>vue demo</title> 9
<style type="text/css">10
html,11
#app{12
font-family: Helvetica;13
text-align: center;14
line-height: 1;15
background-color: rgb(221, 229, 230);16
width: 300px;17
margin-left: auto;18
margin-right: auto;19
}20
21
body {22
margin: 0;23
padding: 0;24
}25
26
.switch {27
background: rgb(255, 255, 255);28
padding: 4px;29
white-space: nowrap;30
display: inline-block;31
margin: 4px;32
width: 30px;33
height: 30px;34
text-align: center;35
background-repeat: no-repeat;36
background-size: 100%;37
vertical-align: middle;38
margin-right: 20px;39
}40
41
.switch.closed {42
background-image: url(switch-closed.svg);43
background-position: 0px 0px;44
}45
46
.switch.opened {47
background-image: url(switch-opened.svg);48
background-position: 0px -4.5px;49
}50
51
.switchBar {52
background-color: rgb(102, 34, 25);53
margin: 22px;54
border: solid 2px rgb(66, 4, 4);55
width: 200px;56
margin-left: auto;57
margin-right: auto;58
}59
60
.button {61
color: lightblue;62
padding: 5px;63
margin: 2px;64
background: rgb(0, 0, 0);65
display: inline-block;66
border-radius: 8px;67
cursor: pointer;68
border: 2px solid rgb(0, 0, 0);69
position: left;70
}71
72
h1 {73
margin: 40px 0 0;74
color: #8a032c;75
}76
77
</style>78
</head>79
<div>80
<fieldset>81
<h1>simTest server</h1>82
<hr>83
<div>84
<div v-for="(str, index) in switchObj" v-bind:key="str">85
<div class="switchBar">86
<div class="switch" v-bind:class="{ closed: this.switchObj[index]==='closed', opened: this.switchObj[index]==='opened' }" @click="onSwitchClick(index)"></div>87
<div class=" button" @click="onClickClose(index)">close</div>88
<div class="button" @click="onClickOpen(index)">open</div>89
</div>90
</div>91
</div>92
</fieldset>93
</div>94
<script>95
96
const app = new Vue({97
name: '#app',98
data () {99
return {100
switchObj: {'K1': 'opened', 'K2': 'opened', 'K3': 'opened'}101
}102
},103
methods: {104
105
// ONLY for closing relay Button106
onClickClose (myIndex) {107
if (this.switchObj[myIndex] === 'closed') {108
console.log('onClickClose: Switch ' + myIndex + ' is already closed.')109
} else if (this.switchObj[myIndex] === 'opened') {110
this.switchObj[myIndex] = 'closed'111
console.log('onClickClose: Switch ' + myIndex + ' is now closed.')112
} else {113
console.error('Unknown paramter/s', myIndex)114
}115
},116
// ONLY for opening relay Button117
onClickOpen (myIndex) {118
if (this.switchObj[myIndex] === 'opened') {119
console.log('onClickClose: Switch ' + myIndex + ' is already opened.')120
} else if (this.switchObj[myIndex] === 'closed') {121
this.switchObj[myIndex] = 'opened'122
console.log('onClickClose: Switch ' + myIndex + ' is now opened.')123
} else {124
console.error('Unknown paramter/s', myIndex)125
}126
},127
// opening AND closing relay by clicking on the image128
onSwitchClick (myIndex) {129
if (this.switchObj[myIndex] === 'closed') {130
this.switchObj[myIndex] = 'opened'131
console.log('onClickClose: Switch ' + myIndex + ' is now opened.')132
} else if (this.switchObj[myIndex] === 'opened') {133
this.switchObj[myIndex] = 'closed'134
console.log('onClickClose: Switch ' + myIndex + ' is now closed.')135
} else {136
console.error('Unknown paramter/s', myIndex)137
}138
}139
}140
})141
</script>142
</html>Advertisement
Answer
Add id attribute with app as value in the root div then in vue instance set el:"#app" instead of name:"#app" and set key to index v-bind:key="index" finally
replace v-bind:class="{ closed: this.switchObj[index]==='closed', opened: this.switchObj[index]==='opened' }" by v-bind:class="{ closed: str==='closed', opened: str==='opened' }"
JavaScript
1
141
141
1
<!DOCTYPE html>2
<html>3
<head>4
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">5
<meta content="utf-8" http-equiv="encoding">6
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>7
<title>vue demo</title> 8
<style type="text/css">9
html,10
#app{11
font-family: Helvetica;12
text-align: center;13
line-height: 1;14
background-color: rgb(221, 229, 230);15
width: 300px;16
margin-left: auto;17
margin-right: auto;18
}19
20
body {21
margin: 0;22
padding: 0;23
}24
25
.switch {26
background: rgb(255, 255, 255);27
padding: 4px;28
white-space: nowrap;29
display: inline-block;30
margin: 4px;31
width: 30px;32
height: 30px;33
text-align: center;34
background-repeat: no-repeat;35
background-size: 100%;36
vertical-align: middle;37
margin-right: 20px;38
}39
40
.switch.closed {41
background: #ee4445;42
background-position: 0px 0px;43
}44
45
.switch.opened {46
background: #44ee45;47
background-position: 0px -4.5px;48
}49
50
.switchBar {51
background-color: rgb(102, 34, 25);52
margin: 22px;53
border: solid 2px rgb(66, 4, 4);54
width: 200px;55
margin-left: auto;56
margin-right: auto;57
}58
59
.button {60
color: lightblue;61
padding: 5px;62
margin: 2px;63
background: rgb(0, 0, 0);64
display: inline-block;65
border-radius: 8px;66
cursor: pointer;67
border: 2px solid rgb(0, 0, 0);68
position: left;69
}70
71
h1 {72
margin: 40px 0 0;73
color: #8a032c;74
}75
76
</style>77
</head>78
<div id="app">79
<fieldset>80
<h1>simTest server</h1>81
<hr>82
<div>83
<div v-for="(str, index) in switchObj" v-bind:key="index">84
<div class="switchBar">85
<div class="switch" v-bind:class="{ closed: str==='closed', opened: str==='opened' }" @click="onSwitchClick(index)">{{index}}</div>86
<div class=" button" @click="onClickClose(index)">close</div>87
<div class="button" @click="onClickOpen(index)">open</div>88
</div>89
</div>90
</div>91
</fieldset>92
</div>93
<script>94
95
const app = new Vue({96
el: '#app',97
data () {98
return {99
switchObj: {'K1': 'opened', 'K2': 'opened', 'K3': 'opened'}100
}101
},102
methods: {103
104
// ONLY for closing relay Button105
onClickClose (myIndex) {106
if (this.switchObj[myIndex] === 'closed') {107
console.log('onClickClose: Switch ' + myIndex + ' is already closed.')108
} else if (this.switchObj[myIndex] === 'opened') {109
this.switchObj[myIndex] = 'closed'110
console.log('onClickClose: Switch ' + myIndex + ' is now closed.')111
} else {112
console.error('Unknown paramter/s', myIndex)113
}114
},115
// ONLY for opening relay Button116
onClickOpen (myIndex) {117
if (this.switchObj[myIndex] === 'opened') {118
console.log('onClickClose: Switch ' + myIndex + ' is already opened.')119
} else if (this.switchObj[myIndex] === 'closed') {120
this.switchObj[myIndex] = 'opened'121
console.log('onClickClose: Switch ' + myIndex + ' is now opened.')122
} else {123
console.error('Unknown paramter/s', myIndex)124
}125
},126
// opening AND closing relay by clicking on the image127
onSwitchClick (myIndex) {128
if (this.switchObj[myIndex] === 'closed') {129
this.switchObj[myIndex] = 'opened'130
console.log('onClickClose: Switch ' + myIndex + ' is now opened.')131
} else if (this.switchObj[myIndex] === 'opened') {132
this.switchObj[myIndex] = 'closed'133
console.log('onClickClose: Switch ' + myIndex + ' is now closed.')134
} else {135
console.error('Unknown paramter/s', myIndex)136
}137
}138
}139
})140
</script>141
</html>