javascript - 下拉列表显示 [object object] 而不是使用 knockout 的值

Question

我正在使用 knockout 尝试将数据绑定(bind)到下拉列表中，但出于某种原因，我只看到 [object][object] 而不是我想要显示的实际值，并且不确定我可能做错了什么。这是我到目前为止所拥有的:

self.views = ko.observableArray();  
self.selectedView = ko.observable();

if (views){  
     for(viewOption = 0; viewOption < views.length; viewOption++){  
          self.views.push(  
                  new viewModel(views[viewOption])  
             );  
         }  
   }

//示例数据

var sampleData = {
            viewers: [
                .....
            ],
            views: [
                {
                    vValue: 'View 1'
                },
                {
                    vValue: 'View 2'
                }
            ]
        };

//HTML

<select data-bind="options: views, value: selectedView"></select>

当我运行它时，我得到一个显示正确数量选项的下拉列表，但它没有显示 View 1 和 View 2，而是显示 [object][object] 两次。

Answer 1

当您在数组中使用对象时，您应该使用 optionsText 作为选项标签，使用 optionsValue 作为选项值。

var vm = {
  myItems: [
    { vValue: 'View 1', id: 1},
    { vValue: 'View 3', id: 3},
    { vValue: 'View 4', id: 4}
  ],
  selected: ko.observable()
};
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="
    options: myItems,
    optionsText: 'vValue',
    optionsValue: 'id',
    value:selected" >
</select>
<br/>
Selected: <label data-bind="text: selected"></label>