V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jeesk
V2EX  ›  Vue.js

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

  •  
  •   jeesk · 2021-03-21 21:58:05 +08:00 · 3183 次点击
    这是一个创建于 1341 天前的主题,其中的信息可能已经有所发展或是发生改变。
        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 条回复    2021-03-22 18:39:51 +08:00
    wheelg
        1
    wheelg  
       2021-03-21 22:30:26 +08:00 via iPhone
    panes 写在 data 里,直接 const 是无效的
    jeesk
        2
    jeesk  
    OP
       2021-03-21 22:39:40 +08:00
    嗯嗯. 这里的 panes, 我也申明到 data 里面了的. 但就是 content 渲染不出来
    no1xsyzy
        3
    no1xsyzy  
       2021-03-21 22:47:53 +08:00
    XiaoxiaoPu
        4
    XiaoxiaoPu  
       2021-03-21 23:25:08 +08:00   ❤️ 1
    这个问题其实跟 v-for 无关,也不是动态渲染的问题。本质是,你想要实现把一段运行时字符串,像模板一样被解析。vue 自身并不支持这样,不过确实有这样的库可以实现比如,github.com/alexjoverm/v-runtime-template 。但是更建议你从需求出发,避免这样做。
    gouflv
        5
    gouflv  
       2021-03-22 08:09:52 +08:00 via iPhone
    动态渲染我选 react
    sjhhjx0122
        6
    sjhhjx0122  
       2021-03-22 08:13:42 +08:00
    vue 也是支持 jsx 的,用 jsx 吧
    jeesk
        7
    jeesk  
    OP
       2021-03-22 09:15:31 +08:00
    @XiaoxiaoPu 差不多就是这意思.
    JaaaaackZheng
        8
    JaaaaackZheng  
       2021-03-22 09:17:13 +08:00
    chouchoui
        9
    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
        10
    SilentDepth  
       2021-03-22 09:35:23 +08:00
    如果组件模板是固定的,建议提前写成组件文件,然后像 @chouchoui #9 那样动态创建组件实例。

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

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

    如果这样也不行,那只能服务端渲染成 HTML 字符串,然后通过 `v-html` 渲染了。
    no1xsyzy
        11
    no1xsyzy  
       2021-03-22 09:46:29 +08:00
    不好意思,半夜没看清……

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

    注意 XSS
    serene11c
        12
    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
        13
    yinxianwei  
       2021-03-22 13:57:19 +08:00
    为什么不自定义组件然后把 pane.content 传值呢
    jeesk
        14
    jeesk  
    OP
       2021-03-22 18:17:34 +08:00
    @gouflv 这个没得选。 稍微熟悉一点 vue 。
    jeesk
        15
    jeesk  
    OP
       2021-03-22 18:18:15 +08:00
    @sjhhjx0122 谢谢, 晚点我去了解一下。
    jeesk
        16
    jeesk  
    OP
       2021-03-22 18:19:50 +08:00
    @chouchoui 多谢多谢
    jeesk
        17
    jeesk  
    OP
       2021-03-22 18:20:31 +08:00
    @yinxianwei 嗯嗯。 我晚点去了解一下。
    jeesk
        18
    jeesk  
    OP
       2021-03-22 18:21:39 +08:00
    @serene11c 看样子你这个解决方案也不错的。 多谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1356 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:51 · PVG 07:51 · LAX 15:51 · JFK 18:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.