Vuejs2 即使v-model属性正在更新，DOM中的默认选择选项也不会更新

我有一个构建选择/下拉菜单的组件

有一个API调用，它会导致

收集

和

选择选项

得到更新并成功构建下拉列表

<!-- src/components/systems/SystemEdit.vue -->    
<custom-dropdown v-model="system.sensor_type" id="sensor_type" name="sensor_type" :collection="sensorTypeDropdown.collection" :firstOption="sensorTypeDropdown.firstOption" :selectedOption="sensorTypeDropdown.selected"></custom-dropdown>


<!-- src/components/CustomDropdown.vue -->
<template>
  <select v-model="selection" required="">
    <option v-show="firstOption" value="null">{{firstOption}}</option>
    <option v-for="item in collection" :value="item[1]">{{ item[0] }}</option>
  </select>
</template>

<script>
  export default {
    props: ['value', 'firstOption', 'collection', 'selectedOption'],
    name: 'customDropdown',
    data () {
      return {
        selection: null
      }
    },
    watch: {
      selection: function(sel) {
        this.selection = sel
        this.$emit('input',sel)
      }
    },
    updated: function() {
      if(this.selectedOption) {
        this.selection = this.selectedOption
      }
    }
  }
</script>

<style>
</style>

即使

sel

输出“sensor1”，并且Vue检查器确认

选择：“sensor1”

编辑2:

我已经缩小了问题的范围，但还没有找到解决办法

methods: {
  setSelected: function() {
    var sel = null
    if(this.selectedOption) {
      sel = this.selectedOption
    }
    return sel
  }
}

它在返回sel时失败

sel

未被视为字符串；我怀疑这是一个Vue错误

作品：

return 'sensor1'

<select v-model="selection" required="" :data-selected="selectedOption">

失败：

return sel

<select v-model="selection" required="">

我已经尝试了所有这些解决方法（没有一个有效）：

这将“起作用”的唯一方法是如果我使用字符串文字，这对我来说是无用的

我被难住了

已解决

为了使其正常工作，我传递给组件的

selectedOption

prop必须呈现在组件模板中的某个位置，即使您在模板中不使用它

失败：

return sel

<select v-model="selection" required="">

或

我希望这对某人有帮助。我会让Evan知道这件事的，因为这件事似乎应该被修正，或者至少在官方文件中注明

摘要：

---

组件脚本块中使用的道具也必须在组件模板中的某个位置呈现，否则可能会出现一些意外行为。

我在脚本块中使用的道具，

selectedOption

，需要在模板中呈现，即使它没有在模板中使用

因此：

<select v-model="selection" required="">

变成：

<select v-model="selection" required="" :data-selected="selectedOption">

---

现在，选定的

项在DOM中成功更新。
VueJS具有特定的配置。特别是，组件应具有
值
道具，该道具将从父级拾取
v型
。然后，您可以
this.$emit（'input'，newVal）
进行更改，就像您配置的那样

我不确定你的部件的具体故障在哪里，但是。更改所选数据可能过于复杂。如果配置正确，您可以发出更改并让父级处理实际更新分配给
v-model
的内容。在示例中，我包括了一些按钮，用于从父级和组件更改所选的var，以说明如何更改var（父级）或发出更改（组件）。
正如您在我的代码示例中所看到的，我已经在使用
$emit
和
值
属性。当需要通过代码中的动态数据而不是通过用户与下拉列表交互来设置所选值时，就会出现复杂情况。在组件中，您似乎正在使用
v-model
，然后使用
更新的
生命周期挂钩来发出更改，在这种情况下，我认为这不是最优的。关于设置值，请看我发布的JSFIDLE中的按钮单击函数在做什么。我现在明白你的意思了。谢谢你的代码示例。因此，为了更充分地使用
emit
，我对代码进行了一些重构……但我最初的问题和解决方案保持不变：我仍然必须在模板中呈现
selectedOption
，以便在脚本块中使用该属性。我不确定
selectedOption
的推理。为什么不使用emit或直接在父级中设置
v-model
的实际值？
<div :id="selectedOption"></div>

<select v-model="selection" required="">

<select v-model="selection" required="" :data-selected="selectedOption">