使用 v-for 动态渲染表单无效 ?

wheelg

2021-03-21 22:30:26 +08:00

panes 写在 data 里，直接 const 是无效的

jeesk

2021-03-21 22:39:40 +08:00

嗯嗯. 这里的 panes, 我也申明到 data 里面了的. 但就是 content 渲染不出来

no1xsyzy

2021-03-21 22:47:53 +08:00

https://stackoverflow.com/help/minimal-reproducible-example

XiaoxiaoPu

2021-03-21 23:25:08 +08:00

这个问题其实跟 v-for 无关，也不是动态渲染的问题。本质是，你想要实现把一段运行时字符串，像模板一样被解析。vue 自身并不支持这样，不过确实有这样的库可以实现比如，github.com/alexjoverm/v-runtime-template 。但是更建议你从需求出发，避免这样做。

gouflv

2021-03-22 08:09:52 +08:00

动态渲染我选 react

sjhhjx0122

2021-03-22 08:13:42 +08:00

vue 也是支持 jsx 的，用 jsx 吧

jeesk

2021-03-22 09:15:31 +08:00

@XiaoxiaoPu 差不多就是这意思.

JaaaaackZheng

2021-03-22 09:17:13 +08:00

https://cn.vuejs.org/v2/api/#v-html 用这个？

chouchoui

2021-03-22 09:18:30 +08:00

假如有两个已经预先定义好的组件叫 Content1 和 Content2，且已经被引用到当前组件中
import Content1 from "...Content1.vue"
import Content2 from "...Content2.vue"

{
components : {
Content1,
Content2,
}
}

const panes = [
{title: '创意 1', content: `Content1`, key: 1,index: 1},
{title: '创意 2', content: `Content2`, key: 2,index: 2},
];

<a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
<component :is="pane.content" />
</a-tab-pane>

目前只知道这种方式

SilentDepth

2021-03-22 09:35:23 +08:00

如果组件模板是固定的，建议提前写成组件文件，然后像 @chouchoui #9 那样动态创建组件实例。

如果不想这样，建议手写 render 函数（ JS 或 JSX 都可以），再通过 `<component is>` 创建组件实例。

如果也不想这样，只能加载包含运行时编译器的 Vue，然后把组件模板定义为 template 组装成组件定义，然后通过 `<component is>` 创建组件实例。

如果这样也不行，那只能服务端渲染成 HTML 字符串，然后通过 `v-html` 渲染了。

no1xsyzy

2021-03-22 09:46:29 +08:00

不好意思，半夜没看清……

1. 生成一个临时组件（用随机数拼接名称），把 content 作为 template 传入（它能用到的其他组件也必须全局注册）。然后调用这个临时组件
2. Vue.compile

注意 XSS

serene11c

2021-03-22 09:53:25 +08:00

动态组件 https://cn.vuejs.org/v2/guide/components.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6
```html
<body>
<div id="app">
<div v-for="item in array" :key="item.id">
<component v-if="item.component" :is="item.component"></component>
<span v-else>{{ item.content }}</span>
</div>
</div>

<script>
Vue.component("tab-home", {
template: "<div>Home component</div>"
});
Vue.component("tab-posts", {
template: "<div>Posts component</div>"
});

new Vue({
el: "#app",
data() {
return {
array: [
{ id: 1, content: "test" },
{ id: 2, component: "tab-home" },
{ id: 3, component: "tab-posts" }
]
};
}
});
</script>
</body>
```

yinxianwei

2021-03-22 13:57:19 +08:00

为什么不自定义组件然后把 pane.content 传值呢

jeesk

2021-03-22 18:17:34 +08:00

@gouflv 这个没得选。稍微熟悉一点 vue 。

jeesk

2021-03-22 18:18:15 +08:00

@sjhhjx0122 谢谢，晚点我去了解一下。

jeesk

2021-03-22 18:19:50 +08:00

@chouchoui 多谢多谢

jeesk

2021-03-22 18:20:31 +08:00

@yinxianwei 嗯嗯。我晚点去了解一下。

jeesk

2021-03-22 18:21:39 +08:00

@serene11c 看样子你这个解决方案也不错的。多谢

Summerdx404

2021-03-22 18:39:51 +08:00

动态组件正解 https://cn.vuejs.org/v2/guide/components-dynamic-async.html

还可以动态引用: https://forum.vuejs.org/t/dynamic-components-with-dynamic-imports/20703/8