踩了一个基础知识的坑

绝地灬酷狼 2023-02-13 11:45 122阅读 0赞

> 今在开发一个循环增加select 的时候，出现了v-model绑定到相同对象，当一个select改变其他也会随之改变的问题

页面操作，1、选择其中一个select  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]

2、当选择后发现上下两个select 也随之选中为了同样的值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]

--------------------

**Think think why … ，修改某一个select 其他两个也会同着更改！**

--------------------

来过过代码找找问题—//

**html**是这样的

<el-form-item
                label="推送消息类型"
              >
                <div v-for="(hItem,index) in pushSecondTypeOfHour" :key="index" class="items-second-type">
                  <el-select v-model="hItem.hModelVal">
                    <el-option
                      v-for="item in hItem.houseList"
                      :key="item.value+'-h'"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-select v-model="hItem.tModelVal">
                    <el-option
                      v-for="item in hItem.temperList"
                      :key="item.value+'-t'"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-select v-model="hItem.maxModelVal">
                    <el-option
                      v-for="item in hItem.maxList"
                      :key="item.value+'-m'"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <i v-show="pushSecondTypeOfHour.length>1&&index!==pushSecondTypeOfHour.length-1" class="el-icon-minus rec-second-msg" @click="redcSecondBtn" />
                  <i v-show="index===pushSecondTypeOfHour.length-1" class="el-icon-plus add-second-msg" @click="addSecondType" />
                  <span v-show="index===pushSecondTypeOfHour.length-1" class="add-second-msg-txt">添加类型1/3</span>
                </div>
              </el-form-item>

**js**是这样的

后来才发现原来是这里`addSecondType()`方法直接用`pushSecondTypeOfHour` push 了这个`this.pushSecondTypeOfHourOption` 对象

--------------------

这就意味着，数组里所有元素的**内存地址**都指向了同一个`pushSecondTypeOfHourOption` 对象， 而后来的`v-model` 绑定自然也就在同一个对象上了，当改变时几个select 所选中的值都**相同**自然就不奇怪了

--------------------

最后修改代码

#### 1、修改pushSecondTypeOfHourOption 定义 ####

将data中的pushSecondTypeOfHourOption 移动到 最外层，定义为一个常量

const TYPE_OPTIONS = { 
      houseList: [
        {  label: '1小时', value: 1 },
        {  label: '3小时', value: 3 },
        {  label: '6小时', value: 6 },
        {  label: '12小时', value: 12 },
        {  label: '24小时', value: 24 }
      ],
      temperList: [
        {  label: '降温', value: 1 },
        {  label: '降水', value: 3 },
        {  label: '风', value: 4 }
      ],
      maxList: [
        {  label: '最大值', value: 1 },
        {  label: '最小值', value: 3 },
        {  label: '平均值', value: 4 },
        {  label: '累计值', value: 5 }
      ],
      hModelVal: 1,
      tModelVal: 1,
      maxModelVal: 1
    }
    export default { 
    // ........

##### 2、再修改methods #####

created() { 
        // this.handlerFilter()
        this.pushSecondTypeOfHour.push(TYPE_OPTIONS)
      },
      methods: { 
        // 增加消息类型
        addSecondType() { 
          // 拷贝一份值
          const typeOptions = Object.assign({ }, TYPE_OPTIONS)
          this.pushSecondTypeOfHour.push(typeOptions)
          console.log(this.pushSecondTypeOfHour)
        }
      }

在`addSecondType()` 使用`Object.assign()`进行对象拷贝，再将其添加到`pushSecondTypeOfHour`数组中，确保数组元素不是同一个对象

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]  
ok 问题解决，没想还踩了个基础知识的坑

这里借用相关文章补补基础知识

JS中的基本类型和引用类型

#### 基本类型：undefined、null、string、number、boolean、symbo（ES6） ####

###### 普通基本类型：undefined、null、symbol（ES6） ######

###### 特殊基本包装类型：string、number、boolean ######

#### 引用类型：Object、Array、RegExp、Date、Function ####

### 区别：引用类型值可添加属性和方法，而基本类型则不可以。 ###

### 1、基本类型 ###

1.  基本类型的变量是存放在栈内存（Stack）里的
2.  基本数据类型的值是按值访问的
3.  基本类型的值是不可变的
4.  基本类型的比较是它们的值的比较

### 2、引用类型 ###

1.  引用类型的值是保存在堆内存（Heap）中的对象（Object）
2.  引用类型的值是按引用访问的
3.  引用类型的值是可变的
4.  引用类型的比较是引用（对象本身）的比较

**基本类型的赋值**其实就是将变量的值复制一份给另一个变量，当一个变量值做操作时并**不会**影响到其他变量

**引用类型的赋值**其实是将对象保存在栈区地址的指针（内存地址）赋值给另一个变量，赋值后等同于这两个变量都指向了同一块内存地址，因此当一个变量赋值给另一个时，两个变量指向的是同一个对象（及内存地址），任何的操作都**会**相互影响。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200529085552522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200529090146686.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200529091746829.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70