Question

我的模型对象如下所示：

{ 
   "property1": "property1value", 
   "property2": [ 
       { 
           "propertyType": "type1", 
           "propertyValue": 10 
       },
       { 
           "propertyType": "type2", 
           "propertyValue": 20 
       }
   ]
}

在我的标记中，我得到了一个FORM和三个INPUT，它们应映射到以下值：

property1
property2（type1）
property2（type2）

第一个很简单：

 <input v-model="property1" type="text"></input>

property2的问题是复杂的结构和事实，只有一种类型，而不是两种类型！

此外，我想以某种方式发布我的表单，以便属性与我的模型结构匹配。

如何解决这个问题？我不知道！

感谢您的帮助！

Answer 1

根据以下评论，这是我更新的答案。关键是你需要一个方法来定位propertyType的索引，如果找不到属性类型，你可以使用v-if来不显示该字段。 v-if可以直接在输入字段上，如果它不包含要被抑制的标签或其他相邻标记，或者为了更加灵活，v-if可以在模板标签上，如下所示。

 <div id="app">
    <input v-model="property1" type="text" /><br />
    <template v-if="getIndex('type1') >= 0">
        Type 1:<input v-model="property2[getIndex('type1')].propertyValue" type="text" /><br />
    </template>
    <template v-if="getIndex('type2') >= 0">
        Type 2: <input v-model="property2[getIndex('type2')].propertyValue" type="text" /><br />
    </template>
 </div>


 var app = new Vue({
        el: '#app',
        data: {
            "property1": "property1value",
            "property2": [
                {
                    "propertyType": "type1",
                    "propertyValue": 10
                },
                {
                    "propertyType": "type2",
                    "propertyValue": 20
                }
            ]
        },
        methods: {
            getIndex: function (propType) {
                var i = 0;
                while (i < this.property2.length) {
                    if (this.property2[i].propertyType == propType) {
                        return i;
                    }
                    i++;
                }
                return -1;
            }

        }
  });

如何在VueJs中映射复杂的数据属性？

1 个答案: