AngularJS 1.5.8：如何将DDL选中项值绑定到两个模型

嘿，在Vue 1.5.8里实现下拉选中时同时更新两个模型，有两种实用的方式，我给你详细拆解下：

方法1：通过change事件手动同步更新 #

这种方式适合需要直接获取选中项DOM信息，或者希望在选中瞬间立即执行额外逻辑的场景。

模板代码 #

<div id="app">
  <select v-model="vm.Blah.Id" @change="syncOtherModel">
    <!-- 遍历选项列表，绑定value为选项id -->
    <option 
      v-for="option in options" 
      :value="option.id"
      :data-extra="option.extraInfo"
    >
      {{ option.displayName }}
    </option>
  </select>
</div>

JavaScript代码 #

new Vue({
  el: '#app',
  data: {
    vm: {
      Blah: { Id: '' },
      SecondModel: { ExtraInfo: '' }
    },
    options: [
      { id: 'opt1', displayName: '选项1', extraInfo: '对应模型1的额外内容' },
      { id: 'opt2', displayName: '选项2', extraInfo: '对应模型2的额外内容' }
    ]
  },
  methods: {
    syncOtherModel(event) {
      // 方式1：通过DOM获取选中项的自定义数据
      const selectedOption = event.target.options[event.target.selectedIndex];
      this.vm.SecondModel.ExtraInfo = selectedOption.dataset.extra;

      // 方式2：通过id匹配data里的选项数据（更推荐，避免依赖DOM）
      const matchedOption = this.options.find(opt => opt.id === this.vm.Blah.Id);
      if (matchedOption) {
        this.vm.SecondModel.ExtraInfo = matchedOption.extraInfo;
      }
    }
  }
});

方法2：使用watch监听自动同步 #

这种方式更符合Vue的响应式思想，不需要直接操作DOM，适合只需要根据vm.Blah.Id的变化来同步另一个模型的场景。

JavaScript代码 #

new Vue({
  el: '#app',
  data: {
    vm: {
      Blah: { Id: '' },
      SecondModel: { ExtraInfo: '' }
    },
    options: [
      { id: 'opt1', displayName: '选项1', extraInfo: '对应模型1的额外内容' },
      { id: 'opt2', displayName: '选项2', extraInfo: '对应模型2的额外内容' }
    ]
  },
  watch: {
    // 监听嵌套属性的变化，注意引号包裹路径
    'vm.Blah.Id'(newId) {
      const matchedOption = this.options.find(opt => opt.id === newId);
      if (matchedOption) {
        this.vm.SecondModel.ExtraInfo = matchedOption.extraInfo;
      }
    }
  }
});

注意事项 #

• 如果你的运行环境不支持Array.find()（比如旧IE），可以用Array.filter()[0]替代，效果一样。
• Vue 1.5.8已经支持@change语法糖，和v-on:change等价，写起来更简洁。

内容的提问来源于stack exchange，提问作者cool breeze