JSFiddle - React, Tailwind, and code Playground
HTML
<div data-bind="with: selectedPrice">
<p data-bind="text: NetPrice"></p>
</div>
<select data-bind="options: priceList, optionsText: 'NetPrice', value: selectedPrice"></select>
JavaScript
function vm() {
var self = this;
self.priceList = ko.observableArray([{
Id: 1,
NetPrice: 123,
IsDefault: false
}, {
Id: 2,
NetPrice: 123.99,
IsDefault: true
}, {
Id: 3,
NetPrice: 199.99,
IsDefault: false
}]);
self.defaultPrice = ko.computed(function(){
ko.utils.arrayForEach(self.priceList, function (price) {
if (price.IsDefault) {
return price;
}
});
});
self.selectedPrice = ko.observable(self.defaultPrice());
};
ko.applyBindings(new vm());