选择时Vue选择错误

Question

所以我有两个用Vue Model填充的选择元素。这两个项目在应用范围内彼此相邻。

<div>
<select id="filterSelect" v-model="strings.testOptions">
    <option v-for="option in strings.testOptions" v-bind:value="option.value">
    {{ option.text }}
    </option>
</select>
<select id="testFilter" v-model="strings.RBCrops" class="data">
     <option v-for="option in strings.RBCropsOptions" v-bind:value="option.value">
      {{ option.text }}
      </option>
  </select>
</div>

选择值由本地化文件设置。

{ 
  …
  testOptions:[
    {text:'A', value:'-'}
  ],
  RBCropsOptions: [
    { text: 'Bottom Right', value: 'RB' },
    { text: 'Bottom Only', value: 'B' },
    { text: 'Right Only', value: 'R' },
    { text: 'None', value: 'N' }
  ],
  …
}

在两种情况下，当用户单击选择元素时，值都可以正常显示。 但是，在mouseup上，两个选择之一不会显示所选值，而是保持空白。另外，在不重新加载页面的情况下就无法进行编辑选择。

这让我发疯了。