Vue bindings and CSS in HTML does not work

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!

result of html atm

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>

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' }"

<!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: #ee4445;
          background-position: 0px 0px;
      }

      .switch.opened {
          background: #44ee45;
          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 id="app">
    <fieldset>
    <h1>simTest server</h1>
        <hr>
        <div>
              <div v-for="(str, index) in switchObj" v-bind:key="index">
        <div class="switchBar">
          <div class="switch" v-bind:class="{ closed: str==='closed', opened: str==='opened' }" @click="onSwitchClick(index)">{{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({
    el: '#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>

Advertisement

Answer