未分類
23 3 月 2021

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

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

資深大佬 : jeesk 2 

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

当我在使用遍历的时候

 <a-tabs v-model="activeKey" hide-add type="editable-card" @edit="onEdit">                   <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">                     {{ pane.content }}                   </a-tab-pane>                    <a-button v-if="panes.length < 1" @click="add" slot="tabBarExtraContent">                     <a-icon type="plus"/>                   </a-button>                  </a-tabs>

这里的 pane.content， 如何使用组件？ 也就是说 panes content 这个字段如何写， 才能使用一些组件， 我尝试过 使用<template><a-from-model-item label="创意名字"> <a-input placeholder="请输入创意名字" v-model="tgjhForm.names[{{index}}].campaignName"/></a-from-model-item></template> , 但是使用{{ pane.content}} ，的时候直接原样输出了。 并没有将 content 的组件渲染出来，而且在 content 里面使用{{index}} 也是无效的。 各位同学帮忙看看， 我要如何修改才能达到，动态渲染的效果.

大佬有話說 (19)

  • 資深大佬 : wheelg

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

  • 主 資深大佬 : jeesk

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

  • 資深大佬 : no1xsyzy

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

  • 資深大佬 : XiaoxiaoPu

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

  • 資深大佬 : gouflv

    动态渲染我选 react

  • 資深大佬 : sjhhjx0122

    vue 也是支持 jsx 的，用 jsx 吧

  • 主 資深大佬 : jeesk

    @XiaoxiaoPu 差不多就是这意思.

  • 資深大佬 : JaaaaackZheng

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

  • 資深大佬 : chouchoui

    假如有两个已经预先定义好的组件叫 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

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

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

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

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

  • 資深大佬 : no1xsyzy

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

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

    注意 XSS

  • 資深大佬 : serene11c

    动态组件 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

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

  • 主 資深大佬 : jeesk

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

  • 主 資深大佬 : jeesk

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

  • 主 資深大佬 : jeesk

    @chouchoui 多谢多谢

  • 主 資深大佬 : jeesk

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

  • 主 資深大佬 : jeesk

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

  • 資深大佬 : Summerdx404

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

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