踩了乙個基礎知識的坑

今在開發乙個迴圈增加select 的時候，出現了v-model繫結到相同物件，當乙個select改變其他也會隨之改變的問題

頁面操作，1、選擇其中乙個select

2、當選擇後發現上下兩個select 也隨之選中為了同樣的值

think think why … ，修改某乙個select 其他兩個也會同著更改！

來過過**找找問題—//

html是這樣的

label=
"推送訊息型別"
>
for=
"(hitem,index) in pushsecondtypeofhour"
:key=
"index"
class
="items-second-type"
>
"hitem.hmodelval"
>
v-for=
"item in hitem.houselist"
:key=
"item.value+'-h'"
:label=
"item.label"
:value=
"item.value"
/>
<
/el-select>
"hitem.tmodelval"
>
v-for=
"item in hitem.temperlist"
:key=
"item.value+'-t'"
:label=
"item.label"
:value=
"item.value"
/>
<
/el-select>
"hitem.maxmodelval"
>
v-for=
"item in hitem.maxlist"
:key=
"item.value+'-m'"
:label=
"item.label"
:value=
"item.value"
/>
<
/el-select>
"pushsecondtypeofhour.length>1&&index!==pushsecondtypeofhour.length-1"
class
="el-icon-minus rec-second-msg" @click=
"redcsecondbtn"
/>
"index===pushsecondtypeofhour.length-1"
class
="el-icon-plus add-second-msg" @click=
"addsecondtype"
/>
"index===pushsecondtypeofhour.length-1"
class
="add-second-msg-txt"
>新增型別1/3
<
/span>
<
/div>
<
/el-form-item>js是這樣的

export

default,,

,,],

temperlist:[,

,], maxlist:[,

,,],

hmodelval:1,

tmodelval:1,

maxmodelval:1}

, pushsecondtypeofhour:

}},created()

, methods:

,// 刪除

redcsecondbtn()

}}後來才發現原來是這裡addsecondtype()方法直接用pushsecondtypeofhourpush 了這個this.pushsecondtypeofhouroption物件

這就意味著，陣列裡所有元素的記憶體位址都指向了同乙個pushsecondtypeofhouroption物件，而後來的v-model繫結自然也就在同乙個物件上了，當改變時幾個select 所選中的值都相同自然就不奇怪了

最後修改**

1、修改pushsecondtypeofhouroption 定義

將data中的pushsecondtypeofhouroption 移動到最外層，定義為乙個常量

const

type_options=,

,,,]

, temperlist:[,

,], maxlist:[,

,,],

hmodelval:1,

tmodelval:1,

maxmodelval:1}

export

default

, methods:

,type_options

)this

.pushsecondtypeofhour.

push

(typeoptions)

console.

log(

this

.pushsecondtypeofhour)

}}在addsecondtype()使用object.assign()進行物件拷貝，再將其新增到pushsecondtypeofhour陣列中，確保陣列元素不是同乙個物件

ok 問題解決，沒想還踩了個基礎知識的坑

js中的基本型別和引用型別

基本型別：undefined、null、string、number、boolean、symbo（es6）

普通基本型別：undefined、null、symbol（es6）

特殊基本包裝型別：string、number、boolean

引用型別：object、array、regexp、date、function基本型別的變數是存放在棧記憶體（stack）裡的

基本資料型別的值是按值訪問的

基本型別的值是不可變的

基本型別的比較是它們的值的比較

引用型別的值是儲存在堆記憶體（heap）中的物件（object）

引用型別的值是按引用訪問的

引用型別的值是可變的

引用型別的比較是引用（物件本身）的比較

基本型別的賦值其實就是將變數的值複製乙份給另乙個變數，當乙個變數值做操作時並不會影響到其他變數

引用型別的賦值其實是將物件儲存在棧區位址的指標（記憶體位址）賦值給另乙個變數，賦值後等同於這兩個變數都指向了同一塊記憶體位址，因此當乙個變數賦值給另乙個時，兩個變數指向的是同乙個物件（及記憶體位址），任何的操作都會相互影響。

踩了乙個MyBatis的大坑

最近在專案中做了乙個上傳檔案類雲盤功能。返回檔案列表的時候需要left join 使用者表，取得上傳者的名字。專案用的是mybatis，寫好之後發現，對於每乙個上傳者，只取到了他上傳的最後乙個檔案，看起來好像是變成了inner join。但是我在mysql workbench裡面用同樣的語句得到...

使用PageHelper踩的乙個小坑

之前使用pagehelper都沒有問題，今天使用時發現查詢出來的資料沒有分頁。一開始的時這樣的 public pageinfonotsaleorder integer pageno,integer clientid 問題 pagehelper.startpage pageno,3 應該放在你要分頁...

踩了乙個基礎 知識的坑

最近踩的乙個小坑

踩了乙個MyBatis的大坑

使用PageHelper踩的乙個小坑

相關推薦

踩了乙個基礎知識的坑