将值设置为 vaadin 组合框(聚合物)
Set value to vaadin combobox(polymer)
我有一个系统,我可以在其中 select vaadin-combobox 中的值或 select 另一个 div 中的值(使用 svg)并动态设置组合的值.如何设置组合的值?
我已经尝试过 value="",但这没有用...
UPDATE 要将组合框的值绑定到第一个数组项,您需要使用计算绑定:
<vaadin-combo-box
value="[[_getFirstItem(sessions)]]"
...>
</vaadin-combo-box>
其中 _getFirstItem()
是您的 Polymer 对象上的一个方法:
Polymer({
is: 'x-foo',
...
_getFirstItem: function(sessions) {
return sessions.length > 0 && sessions[0];
}
});
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-combo-box/vaadin-combo-box.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<vaadin-combo-box
label="Element"
items='[[sessions]]'
value="[[_getFirstItem(sessions)]]">
</vaadin-combo-box>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties : {
sessions: {
type: Array,
value: function() {
return ["Bohrium", "Boron", "Bromine", "Cadmium", "Caesium", "Calcium"];
}
}
},
_getFirstItem: function(sessions) {
return sessions.length > 0 && sessions[0];
}
});
});
</script>
</dom-module>
</body>
You need to provide the set of items which the user can select with the items
property. Current selection is indicated by the value
and selectedItem
properties. You can set or change the selection programmatically by setting the value
property. Doing so also updates the visible fields.
When setting the items declaratively, notice that the attribute value needs to be a valid JSON string. You need to use single quotes for the attribute value and double quotes inside the value (in the JSON string). Alternatively, you can escape the double quotes inside the value.
<vaadin-combo-box
label="Element"
items='["Bohrium", "Boron", "Bromine", "Cadmium", "Caesium", "Calcium"]'
value="Bromine">
</vaadin-combo-box>
Setting the items and value programmatically:
var combobox = document.querySelector('vaadin-combo-box');
combobox.items = ['Bohrium', 'Boron', 'Bromine', 'Cadmium', 'Caesium', 'Calcium'];
combobox.value = 'Bromine';
我简单设置:
item-label-path="nombreCorto" item-value-path="idWaEmpresa" value="1"
我有一个系统,我可以在其中 select vaadin-combobox 中的值或 select 另一个 div 中的值(使用 svg)并动态设置组合的值.如何设置组合的值?
我已经尝试过 value="",但这没有用...
UPDATE 要将组合框的值绑定到第一个数组项,您需要使用计算绑定:
<vaadin-combo-box
value="[[_getFirstItem(sessions)]]"
...>
</vaadin-combo-box>
其中 _getFirstItem()
是您的 Polymer 对象上的一个方法:
Polymer({
is: 'x-foo',
...
_getFirstItem: function(sessions) {
return sessions.length > 0 && sessions[0];
}
});
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-combo-box/vaadin-combo-box.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<vaadin-combo-box
label="Element"
items='[[sessions]]'
value="[[_getFirstItem(sessions)]]">
</vaadin-combo-box>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties : {
sessions: {
type: Array,
value: function() {
return ["Bohrium", "Boron", "Bromine", "Cadmium", "Caesium", "Calcium"];
}
}
},
_getFirstItem: function(sessions) {
return sessions.length > 0 && sessions[0];
}
});
});
</script>
</dom-module>
</body>
You need to provide the set of items which the user can select with the
items
property. Current selection is indicated by thevalue
andselectedItem
properties. You can set or change the selection programmatically by setting thevalue
property. Doing so also updates the visible fields.When setting the items declaratively, notice that the attribute value needs to be a valid JSON string. You need to use single quotes for the attribute value and double quotes inside the value (in the JSON string). Alternatively, you can escape the double quotes inside the value.
<vaadin-combo-box label="Element" items='["Bohrium", "Boron", "Bromine", "Cadmium", "Caesium", "Calcium"]' value="Bromine"> </vaadin-combo-box>
Setting the items and value programmatically:
var combobox = document.querySelector('vaadin-combo-box'); combobox.items = ['Bohrium', 'Boron', 'Bromine', 'Cadmium', 'Caesium', 'Calcium']; combobox.value = 'Bromine';
我简单设置:
item-label-path="nombreCorto" item-value-path="idWaEmpresa" value="1"