Vue.js directives on html rendering

Question

I made this pen. Simple tabs using Vue.js.

Each tab get it's content from this object:

var tabs = [
  {
    title: "Pictures",
    content: "Pictures content"
  },
  {
    title: "Music",
    content: "Music content. Wanna see some <a @click.prevent=\"show = 3\">Documents</a> content?"
  },
  {
    title: "Videos",
    content: "Videos content."
  },
    {
    title: "Documents",
    content: "Documents content. Wanna see some <a @click.prevent=\"show = 1\">Music</a> content?"
  },   
];

To render each tab content:

<div v-for="(tab, index) in tabs" v-if="show == index" :key="index" v-html="tab.content"></div>

I'm stuck trying to make those click directives on 'tab.content' work :( Am I missing something?

Thanks in advance.

@samayo The issue was the "@click" inside the content. Was not working as expected. Luckily, a very good explanation was given here — Eric Gruby
– Eric Gruby, Commented Dec 26, 2017 at 15:19

tony19 · Accepted Answer · 2022-07-15 23:14:33Z

v-html is not Vue content, it is simply innerHTML for an element. You will not be able to use Vue directives or components(!) in v-html content.

What you can do is catch and handle a native click event inside a component. The transition-group is convenient.

const tabs = [{
    title: "Pictures",
    content: "Pictures content"
  },
  {
    title: "Music",
    content: "Music content. Wanna see some <a data-show=\"3\">Documents</a> content?"
  },
  {
    title: "Videos",
    content: "Videos content."
  },
  {
    title: "Documents",
    content: "Documents content. Wanna see some <a data-show=\"1\">Music</a> content?"
  },
];

var vue = new Vue({
  el: "#app",
  data: {
    show: 0,
    tabs
  },
  methods: {
    navigate(event) {
      const target = event.target;

      if (target.dataset.show) {
        event.preventDefault();
        this.show = target.dataset.show;
      }
    }     
  }
});

.section {
  padding: 2em 0;
}

.fade-up-enter-active,
.fade-up-leave-active {
  transition: all 0.3s ease-in-out;
}

.fade-up-enter,
.fade-up-leave-to {
  height: 0;
  transform: translateY(30px);
  opacity: 0;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div class="container section" id="app">
  <div class="tabs">
    <ul>
      <li v-for="(tab, index) in tabs" :class="{'is-active': show == index}"><a @click.prevent="show = index">{{tab.title}}</a></li>
    </ul>
  </div>
  <div class="texts">
    <transition-group name="fade-up" target="div" appear  @click.native="navigate">
      <div v-for="(tab, index) in tabs" v-if="show == index" :key="index" v-html="tab.content"></div>
    </transition-group>
  </div>
</div>

Brilliant, @Roy J :) Your explanation was very clear. I'll read more about native events on components(!).

Collectives™ on Stack Overflow

Vue.js directives on html rendering

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related