【问题标题】:Vue.js initialize object property from htmlVue.js 从 html 初始化对象属性
【发布时间】:2016-02-25 16:45:10
【问题描述】:

如何从 HTML 中设置组合属性(如 composed_prop.foo)?

normal_prop 设置得很好,但composed_prop.foo 没有。

例子:

<div id="app">
      <sample normal_prop=1 composed_prop.foo=1 />
</div>


<script>

    Vue.component('sample',{
      props: {
        normal_prop: 0,

        composed_prop: {
            default:{
               foo: 0,
               bar: 0
            }
        }
      }
    })


    new Vue({
        el: "#app"
    })
</script>

【问题讨论】:

    标签: javascript vue.js


    【解决方案1】:

    你必须这样做:

    <div id="app">
         <sample normal_prop=1 :composed_prop="{foo:10, bar:20}" />
    </div>
    

    请注意,您必须绑定composed_prop,以便评估表达式(而不是将其视为文字字符串)。另请注意,为composed_prop 传入一个对象将完全覆盖您的默认值 - 它不会尝试将属性与默认值合并。所以,如果你只传入{foo:10},那么composed_prop.bar将是未定义的。

    最后一点...我认为 Object 道具的默认值应该是工厂函数。像这样的:

    Vue.component('sample',{
      props: {
        normal_prop: 0,
    
        composed_prop: {
            type: Object,
            default:function(){ // should be a function
                return { foo: 0, bar: 0 };
            }
        }
      }
    })
    

    【讨论】:

    • 是的,它正在工作。非常感谢您的精彩回复以及关于工厂功能的说明,我注意到了警告,但不知道该怎么办。
    猜你喜欢
    • 2013-10-28
    • 1970-01-01
    • 2016-01-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-05
    • 2013-02-24
    • 1970-01-01
    相关资源
    最近更新 更多