在vue.js中使用单选框时selected属性失效
0
[已解决问题]
解决于 2019-05-07 08:53
vue版本为2.6.10
//html:
<div id="checkbox">
<select v-model="sele">
<option selected="selected" value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<p>你选择了：{{sele}}</p>
</div>
//js:
<script>
var checkbox=new Vue({
el:"#checkbox",
data:{
sele: "",
}
})
</script>此时selected=“selected”居然失效了，不知道为什么，value属性为空的话p标签中都不会显示选择结果了，如果不写value的话，那还是默认为空的
默认效果如下：
换其他浏览器也是这样，求前端大神
最佳答案
0
如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项
你可以这样写 v-model="具体值" 而不是对应data中的
奖励园豆：5
v-model="具体值"
这里怎么写？v-model="A"???,这也不对啊
@iiiiiim: 你试一下，先在data里面定义A:'A'
然后v-model = ‘A’
最后附上链接你看一下 https://cn.vuejs.org/v2/guide/forms.html
@牙枣树: 我懂你意思了。。。谢谢
其他回答(2)
0
<option selected="selected" value="">A</option>
<p>你选择了：{{sele?sele:"A"}}</p>这样倒是可以解决问题，但是我觉得肯定不是最佳方案
这样写也可以，在data中给sele赋值A，然后每个选项要么都写value=“A/B/C/D”,要么不写value，如果写了value=“”,那选择框中就会空白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app1">
<select name="" id="" v-model="sele">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<P>你选择了{{sele}}</P>
</div>
<script>
var app1=new Vue({
el:"#app1",
data:{
sele:"A"
}
})
</script>
</body>
</html>
0
你应该在你的data里面先给sele赋值为'A',而不是用selected
是的，这也是一个办法
