关于 html 渲染的 Vue.js 指令

Question

我做了这支笔。 使用 Vue.js 的简单选项卡。

每个选项卡都从此对象获取它的内容：

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?"
  },   
];

要呈现每个选项卡内容：

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

我一直试图让“tab.content”上的那些点击指令起作用:(我错过了什么吗？

提前致谢。

Answer 1

v-html不是 Vue 内容，它只是一个元素的innerHTML 。 您将无法在v-html内容中使用 Vue 指令或组件（！）。

您可以做的是捕获并处理组件内的原生点击事件。 transition-group很方便。

 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>