2021-06-11

今天在使用uniapp做一个需要实现联动的选择提，一个题目两个选项，当你选择这个多少分，另一个就是多少分，满分五分这道题，每个选项可以占一定分值，可以为0

但是在使用uniapp实现时发现，不像html5页面使用vue那样简单，首先是 el-slider  没有办法使用，然后就去官网查看了一下uniapp的滑块（slider）如何使用

附上地址 ：https://uniapp.dcloud.io/component/slider

明确显示了有改变事件 且并不用传参

<view>

       <slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />

</view>

sliderChange(e) { console.log('value 发生变化：' + e.detail.value) }

已经定义好了，只需要写@change="事件名"

事件接参，传过来的参数中会带有当前的变化后的值  e.detail.value

但是，后边一个更恶心的东西出现了，v-model的变量无论我怎么写它都不会发生改变，后来多方查看，确实我的变量发生改变，但是v-model绑定的变量发生改变，但是页面显示的值未发生改变，后来多方百度，，多方考证，发现有的说是因为页面的变量绑定的太深所以页面需要重新赋值一次，虽然不是很懂，但是拿过来使用，还是顺利的改变了当前页面的值     // 运用 this.$forceUpdate() 强制刷新

最后一个问题，我的赋值是分数，所以当我赋值的时候一直报未找到的下标0，1，2，于是决定去看一下赋值的函数都可以使用哪些参数

$this.$set(this.item（变量）,0/1/2（这里的这个参数是多维数组中的下表）,{'变量名':'值'})

附上网址，有需要可以看一下：https://www.cnblogs.com/lanshu123/p/11636377.html

下面就是代码了，需要可以改吧改吧直接用

// 运用 this.$forceUpdate() 强制刷新
    this.$forceUpdate();
    // 如果更改的值为数字，需要为多个层次，不然会默认值变量里面搜索字段为某个数字的 ，仅测试数字
    // 如果字段为
    this.$set(this.value_1_s,'value_marks_1_A',this_value); 
    this.$set(this.value_1_s,'value_marks_1_B',another_value);