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

绑定的属性必须提前声明么?

  •  
  •   cs3230524 · 2020-05-10 14:55:51 +08:00 · 1821 次点击
    这是一个创建于 780 天前的主题,其中的信息可能已经有所发展或是发生改变。
    如果我单向绑定只做展示,有没有不提前声明就能渲染模板的方法?现在模板和填充的数据都有可能是动态的,不能提前声明出来。大家怎么处理这个需求的?
    13 条回复    2020-06-04 10:46:16 +08:00
    cydysm
        1
    cydysm  
       2020-05-10 15:05:12 +08:00 via iPhone
    computed ?
    shintendo
        2
    shintendo  
       2020-05-10 15:08:58 +08:00
    想象不出“不能提前声明”的场景,能举个例子么
    gouflv
        3
    gouflv  
       2020-05-10 15:17:01 +08:00 via iPhone
    对象内部的属性可以动态添加
    cs3230524
        4
    cs3230524  
    OP
       2020-05-10 15:19:53 +08:00
    @shintendo 例如我有许多报告要打印,这些报告模板是后台维护的,报告的字段是用户定义的,所以是动态的。
    rabbbit
        5
    rabbbit  
       2020-05-10 15:24:48 +08:00
    如果是指 data 里的属性的话, 可以用 Vue.set 方法
    cs3230524
        6
    cs3230524  
    OP
       2020-05-10 15:24:52 +08:00
    换个方法吧,有没有办法让 data 里不存在的属性在模板渲染的时候不报错?
    例如:
    var vm = new Vue({
    el: "#app",
    data:{
    a:"test"
    }
    })


    ....

    <td>{{b}}</td>
    ....
    cs3230524
        7
    cs3230524  
    OP
       2020-05-10 15:26:06 +08:00
    能不能让不存在的属性 b,在渲染的时候不报错?
    Messiahhh
        8
    Messiahhh  
       2020-05-10 15:40:43 +08:00
    给个空字符串不好吗
    JasonSi
        9
    JasonSi  
       2020-05-10 16:07:29 +08:00 via iPhone
    @cs3230524 data 里定义一个对象 obj,你用户动态的属性都赋值给 obj,然后 obj.b 就行了呗? 如果要自动更新 ui,每次给 obj 赋值直接替换对象,而不是 obj.b=something ;或者 this.$set
    murmur
        10
    murmur  
       2020-05-10 16:18:19 +08:00
    不需要,可以用$set 进行设置,点号赋值有时候未必能响应,但是如果一开始就是不响应的属性,$set 可能都没用,必须先把旧的属性删了
    zysuper
        11
    zysuper  
       2020-05-10 16:32:52 +08:00
    data 里定义一个对象 obj, 然后用 immer 库修改 obj,最后把

    data.obj = produce(baseState, draftState => {
    draftState.push({todo: "Tweet about it"})
    draftState[1].done = true
    })

    react 用户说。;)
    weikexin
        12
    weikexin  
       2020-05-11 11:21:39 +08:00
    @cs3230524
    可以避免 b 不存在渲染时报错

    ` <td v-if="b">{{b}}</td> `
    ghosthcp516
        13
    ghosthcp516  
       2020-06-04 10:46:16 +08:00
    computed b () { return this.b || '' }
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3998 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 07:30 · PVG 15:30 · LAX 00:30 · JFK 03:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.