headerButton2.vue

<template>
  <button @click="toggle" :class="{ off: !on }">
    <template v-if="on">
      <IframeLink iframe="https://umfrage.smartvillages.online/limesurvey/index.php/396958?lang=de-informal"><div id="questionaireField"><img class="manImg" height="90%" margin="2px" width="90%" src="/img/Icon.svg"/></div></IframeLink>

      <!-- <span><div><img class="manImg" height="100%" width="100%" src="/img/Icon.svg"></img></div></span> -->
    </template>
    <template v-else>
      <div id="questionaireField2"><img class="manImg" height="90%" margin="2px" width="90%" src="/img/Icon.svg"/></div>
    </template>
  </button>
</template>
<!--<style src="buttonstyle.css"></style>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style scoped="">

  button:hover{
    background: #0d47a1;
  }
  button.off {
    background: #7b1fa2;
  }
</style>
<script type="text/babel">

  var instanceVCS = vcs.vcm.Framework.getInstance()

  var goViewPoint = function(){
    instanceVCS.getActiveMap().gotoViewPoint(instanceVCS.viewpoints.Böckingerstraße)
  }

  // $( document ).ready(function() {
  //     alert( "ready!" );
  // });

  export default {
    created() {
    },
    data() {
      return {
        on: false,
      };
    },
    computed: {},
    methods: {
      toggle() {
        this.on = !this.on;
        goViewPoint()

      },
    },
  };



</script>