Vue.js向子组件传递select name属性时出现异常问题排查

嘿，这个问题很常见，我来帮你搞定！

问题根源 #

你在绑定name属性的时候写了:name="{selectName}"，这里的花括号会让Vue把selectName包装成一个对象（相当于{ selectName: selectName }），而浏览器解析对象的时候就会默认显示成[object Object]，这就是为啥你看到的name值不符合预期啦。

解决方案 #

你只需要去掉包裹selectName的花括号就行——因为Vue的v-bind（也就是冒号:语法）已经会直接解析后面的变量值，不需要额外用花括号包裹：

修改后的组件模板代码：

<template>
  <select :name="selectName" >
    <option value="bla">{{selectName}}</option>
  </select>
</template>

<script>
export default {
  props: ['selectName'],
  data() {
    return { }
  }
}
</script>

<style scoped>
</style>

另外，如果你不需要动态更新这个name属性，也可以不用v-bind，直接用插值语法绑定：

<template>
  <select name="{{selectName}}" >
    <option value="bla">{{selectName}}</option>
  </select>
</template>

验证效果 #

修改之后，Chrome开发者工具里生成的代码就会变成你预期的样子：

<select data-v-674655fa="" data-v-70be8f72="" name="providers">
  <option data-v-674655fa="" value="bla">providers</option>
</select>

这样就能完美解决你的问题啦！

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