Meteor & Blaze中select选中项对象传递异常，如何正确获取？

你遇到的问题核心在于HTML的<option>元素的value属性只能存储字符串类型的值。当你在模板里写value={{this}}时，Blaze会把整个tradingPair对象转换成它的默认字符串表示——也就是"[object Object]"，这就是为什么你拿到的是这个结果，而非预期的完整对象。

要正确传递选中的交易对对象，我们需要先给每个选项绑定一个唯一的字符串标识，然后在事件处理函数里根据这个标识从tradingPairs数组中匹配到对应的对象。

1. 修改HTML模板 #

把value绑定为交易对的唯一标识（比如用base+quote的组合拼接，如果你有id字段的话用id会更稳妥）：

<select class="select-pair-drop" id="pairOptions" {{b "change: handleChange"}}>
  {{#each tradingPairs}}
    <option value="{{this.base}}_{{this.quote}}" name="pairOption">
      <span class="base">{{this.base}}</span> / <span class="quote">{{this.quote}}</span>
    </option>
  {{/each}}
</select>

2. 修改视图模型的事件处理函数 #

在handleChange里，先拿到选中的标识字符串，再从数组中找到对应的交易对对象：

handleChange(event) {
  event.preventDefault();
  const selectedKey = event.target.value;
  // 从tradingPairs数组中匹配对应的对象
  const selectedPair = this.tradingPairs.find(pair => `${pair.base}_${pair.quote}` === selectedKey);
  console.log(selectedPair); // 现在应该能拿到完整的交易对对象了
  this.select(selectedPair);
}

如果你不想拼接字符串，也可以给<option>添加data-pair属性存储对象的JSON字符串，再通过反序列化还原对象：

修改后的HTML #

<select class="select-pair-drop" id="pairOptions" {{b "change: handleChange"}}>
  {{#each tradingPairs}}
    <option data-pair={{JSON.stringify this}} name="pairOption">
      <span class="base">{{this.base}}</span> / <span class="quote">{{this.quote}}</span>
    </option>
  {{/each}}
</select>

修改后的JS #

handleChange(event) {
  event.preventDefault();
  const selectedOption = event.target.options[event.target.selectedIndex];
  const selectedPair = JSON.parse(selectedOption.dataset.pair);
  console.log(selectedPair);
  this.select(selectedPair);
}

注意：这个方案需要确保你的交易对对象是可JSON序列化的（没有循环引用等问题）。

浏览器的DOM系统中，表单元素的value属性本质就是字符串类型，任何非字符串的值都会被强制转换为字符串。对象的默认字符串转换结果就是"[object Object]"，这是JavaScript的原生行为，和Blaze/Meteor本身无关。

内容的提问来源于stack exchange，提问作者Benjamin Hughes