首页新闻找找看学习计划

在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的话,那还是默认为空的
默认效果如下:

换其他浏览器也是这样,求前端大神

vue
学会乐观的主页 学会乐观 | 小虾三级 | 园豆:653
提问于:2019-05-06 15:39
< >
分享
最佳答案
0

如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项

你可以这样写 v-model="具体值" 而不是对应data中的

奖励园豆:5
蔡新 | 菜鸟二级 |园豆:207 | 2019-05-06 16:19

v-model="具体值"
这里怎么写?v-model="A"???,这也不对啊

学会乐观 | 园豆:653 (小虾三级) | 2019-05-06 16:25

@iiiiiim: 你试一下,先在data里面定义A:'A'
然后v-model = ‘A’
最后附上链接你看一下 https://cn.vuejs.org/v2/guide/forms.html

蔡新 | 园豆:207 (菜鸟二级) | 2019-05-06 16:32

@牙枣树: 我懂你意思了。。。谢谢

学会乐观 | 园豆:653 (小虾三级) | 2019-05-06 17:07
其他回答(2)
0
<option selected="selected" value="">A</option>

<p>你选择了:{{sele?sele:"A"}}</p>

这样倒是可以解决问题,但是我觉得肯定不是最佳方案

学会乐观 | 园豆:653 (小虾三级) | 2019-05-06 15:59

这样写也可以,在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) 反对(0) 学会乐观 | 园豆:653 (小虾三级) | 2019-05-07 09:00
0

你应该在你的data里面先给sele赋值为'A',而不是用selected

QT2019 | 园豆:77 (初学一级) | 2019-05-07 06:30

是的,这也是一个办法

支持(0) 反对(0) 学会乐观 | 园豆:653 (小虾三级) | 2019-05-07 08:53
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册