Vue

by WILLIAM CORREA

HTML

<div id="app">
  <component :is="component"></component>
  <button @click="updateComponent">update</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: () => ({
    component: {
    	template: '<div>nothing</div>'
    }
  }),
  methods: {
  	updateComponent () {
      fetch('//dog.ceo/api/breeds/image/random')
        .then((response) => response.json())
        .then((json) => {
          this.component = {
            template: '<div><img v-bind="{ src }"><hr><button @click="alert">click</button></div>',
            data: () => ({
            	src: json.message
            }),
            methods: {
              alert () {
                window.alert('It works')
              }
            }
          }
        })
    }
  },
  created () {
  	this.updateComponent()
  }
})