[Vuejs]-How to replace tag element in Vuejs?

by

0👍

You could use dynamic component component (doc)

const app = new Vue({
  el: '#app',
  data: {
    tagName: 'div'
  },
  methods: {
    toggle(tagName) {
      this.tagName = tagName
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <component :is="tagName" class="prev">Prev</component>
  <br/>
  <component :is="tagName" class="next">Next</component>
  <br/>
  <button @click="toggle('div')">Change To Div</button>
  <button @click="toggle('button')">Change To Button</button>
</div>

Leave a comment