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
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<title>vue demo</title>
<style type="text/css">
html,
#app{
font-family: Helvetica;
text-align: center;
line-height: 1;
background-color: rgb(221, 229, 230);
width: 300px;
margin-left: auto;
margin-right: auto;
}
body {
margin: 0;
padding: 0;
}
.switch {
background: rgb(255, 255, 255);
padding: 4px;
white-space: nowrap;
display: inline-block;
margin: 4px;
width: 30px;
height: 30px;
text-align: center;
background-repeat: no-repeat;
background-size: 100%;
vertical-align: middle;
margin-right: 20px;
}
.switch.closed {
background-image: url(switch-closed.svg);
background-position: 0px 0px;
}
.switch.opened {
background-image: url(switch-opened.svg);
background-position: 0px -4.5px;
}
.switchBar {
background-color: rgb(102, 34, 25);
margin: 22px;
border: solid 2px rgb(66, 4, 4);
width: 200px;
margin-left: auto;
margin-right: auto;
}
.button {
color: lightblue;
padding: 5px;
margin: 2px;
background: rgb(0, 0, 0);
display: inline-block;
border-radius: 8px;
cursor: pointer;
border: 2px solid rgb(0, 0, 0);
position: left;
}
h1 {
margin: 40px 0 0;
color: #8a032c;
}
</style>
</head>
<div>
<fieldset>
<h1>simTest server</h1>
<hr>
<div>
<div v-for="(str, index) in switchObj" v-bind:key="str">
<div class="switchBar">
<div class="switch" v-bind:class="{ closed: this.switchObj[index]==='closed', opened: this.switchObj[index]==='opened' }" @click="onSwitchClick(index)"></div>
<div class=" button" @click="onClickClose(index)">close</div>
<div class="button" @click="onClickOpen(index)">open</div>
</div>
</div>
</div>
</fieldset>
</div>
<script>
const app = new Vue({
name: '#app',
data () {
return {
switchObj: {'K1': 'opened', 'K2': 'opened', 'K3': 'opened'}
}
},
methods: {
// ONLY for closing relay Button
onClickClose (myIndex) {
if (this.switchObj[myIndex] === 'closed') {
console.log('onClickClose: Switch ' + myIndex + ' is already closed.')
} else if (this.switchObj[myIndex] === 'opened') {
this.switchObj[myIndex] = 'closed'
console.log('onClickClose: Switch ' + myIndex + ' is now closed.')
} else {
console.error('Unknown paramter/s', myIndex)
}
},
// ONLY for opening relay Button
onClickOpen (myIndex) {
if (this.switchObj[myIndex] === 'opened') {
console.log('onClickClose: Switch ' + myIndex + ' is already opened.')
} else if (this.switchObj[myIndex] === 'closed') {
this.switchObj[myIndex] = 'opened'
console.log('onClickClose: Switch ' + myIndex + ' is now opened.')
} else {
console.error('Unknown paramter/s', myIndex)
}
},
// opening AND closing relay by clicking on the image
onSwitchClick (myIndex) {
if (this.switchObj[myIndex] === 'closed') {
this.switchObj[myIndex] = 'opened'
console.log('onClickClose: Switch ' + myIndex + ' is now opened.')
} else if (this.switchObj[myIndex] === 'opened') {
this.switchObj[myIndex] = 'closed'
console.log('onClickClose: Switch ' + myIndex + ' is now closed.')
} else {
console.error('Unknown paramter/s', myIndex)
}
}
}
})
</script>
</html>