Question

我有类似的东西：

<div v-if="dataIsLoaded" v-for="(line, index) in json.data" v-on:dblclick="edit(index)" v-html="test(index)">

</div>

和test（index）返回html-ish字符串：

<div id=${index} v-on:click="remove(index)"></div>

我如何使其工作？

我的目标是：

如果dataIsLoaded == true，则json.data中的foreach（行，索引）执行

test（index）并将其输出返回到该容器并显示为html。

同时，test（index）的输出可以具有通过字符串定义的与它们关联的不同功能/事件（如上所示）。

Answer 1

您为什么在这里使用v-html？ v-html实际上仅应在非常具体和有限的情况下才需要；我认为这并不适用。字符串<div id=${index} v-on:click="remove(index)"></div>是 not 纯HTML，它是Vue模板字符串，因此不起作用。 v-html也容易受到XSS攻击；总之，我要避免像瘟疫一样。

改为执行以下操作：

<template v-if="dataIsLoaded">
  <div v-for="(line, index) in json.data" @dblclick="edit(index)">
    <!-- Type1 -->
    <div v-if="line.type === 'Type1'" :id="index" @click="remove(index)"></div>

    <!-- Type2 -->
    <div v-else-if="line.type === 'Type2'">...</div>
  </div>
</template>

我已经在每个线对象上添加了type属性作为判别器，以确定该行应使用哪个模板。

我也将v-if="dataIsLoaded"提升到div上方的<template>，因为v-if是针对v-for生成的每个div进行求值的，并且条件不依赖于在孩子身上，因此不必为每个孩子重复一次（较小的优化）。

如果您不喜欢包含大量v-if和v-else-if（模板中的一种“ switch”语句）的想法，则可以改用<component :is="...">：< / p>

<div v-for="(line, index) in json.data" @dblclick="edit(index)">
  <component :is="line.type" :id="index"/>
</div>

import Type1 from './type1.vue'
import Type2 from './type2.vue'

export default {
  components: {
    Type1,
    Type2
  }
}

Answer 2

v-html是不可能的，因为doc states

更新元素的innerHTML。请注意，内容已插入以纯HTML格式-不会将其编译为Vue模板

一种更具组件思维的解决方案是创建具有所需行为的组件，并将其粘贴为v-for的结果：

// componentWithOnClick.js
<script>
export default {
name: 'ComponentWithOnClick',
methods: {
  remove() {
    //
  }
}
</script>
<template>
  <div id=${index} v-on:click="remove(index)"></div>
</template>

，然后在父文件中使用它：

//app.js

import ComponentWithOnClick from './ComponentWithOnClick.vue'

 {
  components: {
ComponentWithOnClick
}
//
    <div v-if="dataIsLoaded" v-for="(line, index) in json.data" v-on:dblclick="edit(index)">
    <ComponentWithOnClick></ComponentWithOnClick>
    </div>

Vue-动态创建使用例如v-on：div的div

2 个答案: