[{"data":1,"prerenderedAt":1434},["ShallowReactive",2],{"article-multiple-select-vue":3},{"id":4,"title":5,"body":6,"category":1420,"createdAt":1422,"description":1423,"extension":1424,"index":1425,"meta":1426,"navigation":337,"path":1427,"publish":337,"seo":1428,"series":1425,"seriesTitle":1425,"stem":1429,"tag":1430,"thumbnail":1432,"updatedAt":1422,"__hash__":1433},"articles\u002Farticles\u002Fmultiple-select-vue.md","multiple属性での複数選択セレクトボックスで選択した値をemitする方法。",{"type":7,"value":8,"toc":1414},"minimark",[9,13,17,20,38,173,194,197,573,580,587,591,594,602,714,725,730,733,737,741,744,1224,1230,1236,1245,1312,1329,1386,1395,1398,1401,1404,1407,1410],[10,11,12],"p",{},"こんにちはjunです。vue.jsを用いてフォームUIを作成していたところmultipule属性を付与したセレクトボックスで選択した値を$emitする方法についてメモ＆共有しようと思います。",[14,15,16],"h2",{"id":16},"vueを用いてselectの値を受け取る",[10,18,19],{},"セレクトボックスは基本的には以下の様に、プルダウン式のメニューから一つの値を選ぶ要素です。",[21,22,24,25,24,30,24,34],"select",{"name":23},"sample","\n ",[26,27,29],"option",{"value":28},"1","選択肢１",[26,31,33],{"value":32},"2","選択肢2",[26,35,37],{"value":36},"3","選択肢3",[39,40,45],"pre",{"className":41,"code":42,"language":43,"meta":44,"style":44},"language-html shiki shiki-themes material-theme-ocean","\u003Cselect name=\"sample\">\n \u003Coption value=\"1\">選択肢１\u003C\u002Foption>\n \u003Coption value=\"2\">選択肢2\u003C\u002Foption>\n \u003Coption value=\"3\">選択肢3\u003C\u002Foption>\n\u003C\u002Fselect>\n","html","",[46,47,48,78,110,137,164],"code",{"__ignoreMap":44},[49,50,53,57,60,64,67,70,73,75],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"sAklC","\u003C",[49,58,21],{"class":59},"s-wAU",[49,61,63],{"class":62},"sJ14y"," name",[49,65,66],{"class":55},"=",[49,68,69],{"class":55},"\"",[49,71,23],{"class":72},"sfyAc",[49,74,69],{"class":55},[49,76,77],{"class":55},">\n",[49,79,81,84,86,89,91,93,95,97,100,103,106,108],{"class":51,"line":80},2,[49,82,83],{"class":55}," \u003C",[49,85,26],{"class":59},[49,87,88],{"class":62}," value",[49,90,66],{"class":55},[49,92,69],{"class":55},[49,94,28],{"class":72},[49,96,69],{"class":55},[49,98,99],{"class":55},">",[49,101,29],{"class":102},"s0W1g",[49,104,105],{"class":55},"\u003C\u002F",[49,107,26],{"class":59},[49,109,77],{"class":55},[49,111,113,115,117,119,121,123,125,127,129,131,133,135],{"class":51,"line":112},3,[49,114,83],{"class":55},[49,116,26],{"class":59},[49,118,88],{"class":62},[49,120,66],{"class":55},[49,122,69],{"class":55},[49,124,32],{"class":72},[49,126,69],{"class":55},[49,128,99],{"class":55},[49,130,33],{"class":102},[49,132,105],{"class":55},[49,134,26],{"class":59},[49,136,77],{"class":55},[49,138,140,142,144,146,148,150,152,154,156,158,160,162],{"class":51,"line":139},4,[49,141,83],{"class":55},[49,143,26],{"class":59},[49,145,88],{"class":62},[49,147,66],{"class":55},[49,149,69],{"class":55},[49,151,36],{"class":72},[49,153,69],{"class":55},[49,155,99],{"class":55},[49,157,37],{"class":102},[49,159,105],{"class":55},[49,161,26],{"class":59},[49,163,77],{"class":55},[49,165,167,169,171],{"class":51,"line":166},5,[49,168,105],{"class":55},[49,170,21],{"class":59},[49,172,77],{"class":55},[10,174,175,176,179,180,182,183,185,186,189,190,193],{},"基本的にinput系の値を取得するときは",[46,177,178],{},"v-model","を使用するのが定石ですが、",[46,181,178],{},"では解決できないコンポーネントの状況もあるでしょう。私も",[46,184,178],{},"という糖衣構文ではなく",[46,187,188],{},"v-bind=\"~~~\"",", ",[46,191,192],{},"@input=\"$emit(~~~~)\"","という形で入力された値を親コンポーネントに返す様にしていました。",[10,195,196],{},"一択のセレクトボックスであれば以下の様に記述できます。",[39,198,202],{"className":199,"code":200,"language":201,"meta":44,"style":44},"language-vue shiki shiki-themes material-theme-ocean","\u003Ctemplate>\n \u003Cselect name=\"postName\" @input=\"$emit('newInput', $event.target.value)\">\n   \u003Coption v-for=\"val in selectBox\"\n           :value=\"val.value\" \n           :selected=\"inputValue === val.value\">\n           {{val.text}}\n   \u003C\u002Foption>\n \u003C\u002Fselect>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default{\n name:'childSelect',\n props:['inputed'],  \u002F\u002F親コンポーネントから初期値のvalueを受け取るためのprops\n data(){\n   return{\n     selector:[\n          {text:'選択肢1',value:'1'},\n          {text:'選択肢2',value:'2'},\n          {text:'選択肢3',value:'3'}\n     ],\n   }\n },\n \n}\n\u003C\u002Fscript>\n","vue",[46,203,204,213,244,264,281,297,303,313,323,332,339,349,362,382,410,422,430,441,475,504,534,542,548,554,559,564],{"__ignoreMap":44},[49,205,206,208,211],{"class":51,"line":52},[49,207,56],{"class":55},[49,209,210],{"class":59},"template",[49,212,77],{"class":55},[49,214,215,217,219,221,223,225,228,230,233,235,237,240,242],{"class":51,"line":80},[49,216,83],{"class":55},[49,218,21],{"class":59},[49,220,63],{"class":62},[49,222,66],{"class":55},[49,224,69],{"class":55},[49,226,227],{"class":72},"postName",[49,229,69],{"class":55},[49,231,232],{"class":62}," @input",[49,234,66],{"class":55},[49,236,69],{"class":55},[49,238,239],{"class":72},"$emit('newInput', $event.target.value)",[49,241,69],{"class":55},[49,243,77],{"class":55},[49,245,246,249,251,254,256,258,261],{"class":51,"line":112},[49,247,248],{"class":55},"   \u003C",[49,250,26],{"class":59},[49,252,253],{"class":62}," v-for",[49,255,66],{"class":55},[49,257,69],{"class":55},[49,259,260],{"class":72},"val in selectBox",[49,262,263],{"class":55},"\"\n",[49,265,266,269,271,273,276,278],{"class":51,"line":139},[49,267,268],{"class":62},"           :value",[49,270,66],{"class":55},[49,272,69],{"class":55},[49,274,275],{"class":72},"val.value",[49,277,69],{"class":55},[49,279,280],{"class":55}," \n",[49,282,283,286,288,290,293,295],{"class":51,"line":166},[49,284,285],{"class":62},"           :selected",[49,287,66],{"class":55},[49,289,69],{"class":55},[49,291,292],{"class":72},"inputValue === val.value",[49,294,69],{"class":55},[49,296,77],{"class":55},[49,298,300],{"class":51,"line":299},6,[49,301,302],{"class":102},"           {{val.text}}\n",[49,304,306,309,311],{"class":51,"line":305},7,[49,307,308],{"class":55},"   \u003C\u002F",[49,310,26],{"class":59},[49,312,77],{"class":55},[49,314,316,319,321],{"class":51,"line":315},8,[49,317,318],{"class":55}," \u003C\u002F",[49,320,21],{"class":59},[49,322,77],{"class":55},[49,324,326,328,330],{"class":51,"line":325},9,[49,327,105],{"class":55},[49,329,210],{"class":59},[49,331,77],{"class":55},[49,333,335],{"class":51,"line":334},10,[49,336,338],{"emptyLinePlaceholder":337},true,"\n",[49,340,342,344,347],{"class":51,"line":341},11,[49,343,56],{"class":55},[49,345,346],{"class":59},"script",[49,348,77],{"class":55},[49,350,352,355,359],{"class":51,"line":351},12,[49,353,354],{"class":62},"export",[49,356,358],{"class":357},"s6cf3"," default",[49,360,361],{"class":55},"{\n",[49,363,365,368,371,374,377,379],{"class":51,"line":364},13,[49,366,63],{"class":367},"s5Dmg",[49,369,370],{"class":55},":",[49,372,373],{"class":55},"'",[49,375,376],{"class":72},"childSelect",[49,378,373],{"class":55},[49,380,381],{"class":55},",\n",[49,383,385,388,390,393,395,398,400,403,406],{"class":51,"line":384},14,[49,386,387],{"class":367}," props",[49,389,370],{"class":55},[49,391,392],{"class":59},"[",[49,394,373],{"class":55},[49,396,397],{"class":72},"inputed",[49,399,373],{"class":55},[49,401,402],{"class":59},"]",[49,404,405],{"class":55},",",[49,407,409],{"class":408},"sC9rS","  \u002F\u002F親コンポーネントから初期値のvalueを受け取るためのprops\n",[49,411,413,417,420],{"class":51,"line":412},15,[49,414,416],{"class":415},"sdLwU"," data",[49,418,419],{"class":59},"()",[49,421,361],{"class":55},[49,423,425,428],{"class":51,"line":424},16,[49,426,427],{"class":357},"   return",[49,429,361],{"class":55},[49,431,433,436,438],{"class":51,"line":432},17,[49,434,435],{"class":59},"     selector",[49,437,370],{"class":55},[49,439,440],{"class":59},"[\n",[49,442,444,447,450,452,454,457,459,461,464,466,468,470,472],{"class":51,"line":443},18,[49,445,446],{"class":55},"          {",[49,448,449],{"class":59},"text",[49,451,370],{"class":55},[49,453,373],{"class":55},[49,455,456],{"class":72},"選択肢1",[49,458,373],{"class":55},[49,460,405],{"class":55},[49,462,463],{"class":59},"value",[49,465,370],{"class":55},[49,467,373],{"class":55},[49,469,28],{"class":72},[49,471,373],{"class":55},[49,473,474],{"class":55},"},\n",[49,476,478,480,482,484,486,488,490,492,494,496,498,500,502],{"class":51,"line":477},19,[49,479,446],{"class":55},[49,481,449],{"class":59},[49,483,370],{"class":55},[49,485,373],{"class":55},[49,487,33],{"class":72},[49,489,373],{"class":55},[49,491,405],{"class":55},[49,493,463],{"class":59},[49,495,370],{"class":55},[49,497,373],{"class":55},[49,499,32],{"class":72},[49,501,373],{"class":55},[49,503,474],{"class":55},[49,505,507,509,511,513,515,517,519,521,523,525,527,529,531],{"class":51,"line":506},20,[49,508,446],{"class":55},[49,510,449],{"class":59},[49,512,370],{"class":55},[49,514,373],{"class":55},[49,516,37],{"class":72},[49,518,373],{"class":55},[49,520,405],{"class":55},[49,522,463],{"class":59},[49,524,370],{"class":55},[49,526,373],{"class":55},[49,528,36],{"class":72},[49,530,373],{"class":55},[49,532,533],{"class":55},"}\n",[49,535,537,540],{"class":51,"line":536},21,[49,538,539],{"class":59},"     ]",[49,541,381],{"class":55},[49,543,545],{"class":51,"line":544},22,[49,546,547],{"class":55},"   }\n",[49,549,551],{"class":51,"line":550},23,[49,552,553],{"class":55}," },\n",[49,555,557],{"class":51,"line":556},24,[49,558,280],{"class":59},[49,560,562],{"class":51,"line":561},25,[49,563,533],{"class":55},[49,565,567,569,571],{"class":51,"line":566},26,[49,568,105],{"class":55},[49,570,346],{"class":59},[49,572,77],{"class":55},[10,574,575,576,579],{},"この様にすることで親コンポーネントでは",[46,577,578],{},"newInput","を用いてこのセレクトボックスからの値を受け取ることができます。",[10,581,582,583,586],{},"もし編集画面など、セレクトボックスに予め選択済みの設定を行う場合はpropsにvalueの値を入れておけば、一致する選択肢に",[46,584,585],{},"selected","が付与されます。",[14,588,590],{"id":589},"multipuleで複数選択を可能にする","Multipuleで複数選択を可能にする",[10,592,593],{},"チェックボックスにしては値が多く、リストの方が見やすいのでセレクトボックスから複数選択ができる様にするためには、multipleという属性を付与するだけで実装できます。",[21,595,24,596,24,598,24,600],{"name":23,"multiple":337},[26,597,29],{"value":28},[26,599,33],{"value":32},[26,601,37],{"value":36},[39,603,605],{"className":41,"code":604,"language":43,"meta":44,"style":44},"\u003Cselect name=\"sample\" multiple>\n \u003Coption value=\"1\">選択肢１\u003C\u002Foption>\n \u003Coption value=\"2\">選択肢2\u003C\u002Foption>\n \u003Coption value=\"3\">選択肢3\u003C\u002Foption>\n\u003C\u002Fselect>\n",[46,606,607,628,654,680,706],{"__ignoreMap":44},[49,608,609,611,613,615,617,619,621,623,626],{"class":51,"line":52},[49,610,56],{"class":55},[49,612,21],{"class":59},[49,614,63],{"class":62},[49,616,66],{"class":55},[49,618,69],{"class":55},[49,620,23],{"class":72},[49,622,69],{"class":55},[49,624,625],{"class":62}," multiple",[49,627,77],{"class":55},[49,629,630,632,634,636,638,640,642,644,646,648,650,652],{"class":51,"line":80},[49,631,83],{"class":55},[49,633,26],{"class":59},[49,635,88],{"class":62},[49,637,66],{"class":55},[49,639,69],{"class":55},[49,641,28],{"class":72},[49,643,69],{"class":55},[49,645,99],{"class":55},[49,647,29],{"class":102},[49,649,105],{"class":55},[49,651,26],{"class":59},[49,653,77],{"class":55},[49,655,656,658,660,662,664,666,668,670,672,674,676,678],{"class":51,"line":112},[49,657,83],{"class":55},[49,659,26],{"class":59},[49,661,88],{"class":62},[49,663,66],{"class":55},[49,665,69],{"class":55},[49,667,32],{"class":72},[49,669,69],{"class":55},[49,671,99],{"class":55},[49,673,33],{"class":102},[49,675,105],{"class":55},[49,677,26],{"class":59},[49,679,77],{"class":55},[49,681,682,684,686,688,690,692,694,696,698,700,702,704],{"class":51,"line":139},[49,683,83],{"class":55},[49,685,26],{"class":59},[49,687,88],{"class":62},[49,689,66],{"class":55},[49,691,69],{"class":55},[49,693,36],{"class":72},[49,695,69],{"class":55},[49,697,99],{"class":55},[49,699,37],{"class":102},[49,701,105],{"class":55},[49,703,26],{"class":59},[49,705,77],{"class":55},[49,707,708,710,712],{"class":51,"line":166},[49,709,105],{"class":55},[49,711,21],{"class":59},[49,713,77],{"class":55},[10,715,716,717,720,721,724],{},"実際に",[46,718,719],{},"$event.target.value","を",[46,722,723],{},"console.log()","で出力して見てみると、選択肢１をクリックしてから他の選択肢も含めましたが帰って来た結果は全て「１」でした。",[726,727],"image-render",{":src":728,":width":729},"'_mix\u002Fvue-select03-768x197.png'","'100%'",[10,731,732],{},"格納する親コンポーネントのdataもこの様に１から変化ありませんでした。",[726,734],{":src":735,":width":736},"'_mix\u002Fvue-select04.png'","'400px'",[14,738,740],{"id":739},"multipleの場合はeventtargetoptions","multipleの場合は$event.target.options",[10,742,743],{},"選択された値は全て配列で帰ってくる様に調整をします。inputされた時、以下の様に値を取得する様に変更します。",[39,745,747],{"className":199,"code":746,"language":201,"meta":44,"style":44},"\u003Ctemplate>\n \u003Cselect name=\"postName\" @input=\"returnValeu($event)\" multiple>\n   \u003Coption v-for=\"val in selectBox\"\n           :value=\"val.value\" \n           :selected=\"inputValue === val.value\">\n           {{val.text}}\n   \u003C\u002Foption>\n \u003C\u002Fselect>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default{\n name:'childSelect',\n props:['inputed'],  \u002F\u002F親コンポーネントから初期値のvalueを受け取るためのprops\n methods:{\n  returnValeu($event){\n    let opt = Object.values($event.target.options).filter(ele=>{\n                  return ele.selected;\n              })\n    let values = opt.map(ele=>ele.value);\n    this.$emit('newInput', values);\n  }\n }\n data(){\n   return{\n     selector:[\n          {text:'選択肢1',value:'1'},\n          {text:'選択肢2',value:'2'},\n          {text:'選択肢3',value:'3'}\n     ],\n   }\n },\n \n}\n\u003C\u002Fscript>\n",[46,748,749,757,788,804,818,832,836,844,852,860,864,872,880,894,914,922,938,990,1005,1013,1045,1069,1074,1079,1087,1093,1101,1130,1159,1188,1195,1200,1205,1210,1215],{"__ignoreMap":44},[49,750,751,753,755],{"class":51,"line":52},[49,752,56],{"class":55},[49,754,210],{"class":59},[49,756,77],{"class":55},[49,758,759,761,763,765,767,769,771,773,775,777,779,782,784,786],{"class":51,"line":80},[49,760,83],{"class":55},[49,762,21],{"class":59},[49,764,63],{"class":62},[49,766,66],{"class":55},[49,768,69],{"class":55},[49,770,227],{"class":72},[49,772,69],{"class":55},[49,774,232],{"class":62},[49,776,66],{"class":55},[49,778,69],{"class":55},[49,780,781],{"class":72},"returnValeu($event)",[49,783,69],{"class":55},[49,785,625],{"class":62},[49,787,77],{"class":55},[49,789,790,792,794,796,798,800,802],{"class":51,"line":112},[49,791,248],{"class":55},[49,793,26],{"class":59},[49,795,253],{"class":62},[49,797,66],{"class":55},[49,799,69],{"class":55},[49,801,260],{"class":72},[49,803,263],{"class":55},[49,805,806,808,810,812,814,816],{"class":51,"line":139},[49,807,268],{"class":62},[49,809,66],{"class":55},[49,811,69],{"class":55},[49,813,275],{"class":72},[49,815,69],{"class":55},[49,817,280],{"class":55},[49,819,820,822,824,826,828,830],{"class":51,"line":166},[49,821,285],{"class":62},[49,823,66],{"class":55},[49,825,69],{"class":55},[49,827,292],{"class":72},[49,829,69],{"class":55},[49,831,77],{"class":55},[49,833,834],{"class":51,"line":299},[49,835,302],{"class":102},[49,837,838,840,842],{"class":51,"line":305},[49,839,308],{"class":55},[49,841,26],{"class":59},[49,843,77],{"class":55},[49,845,846,848,850],{"class":51,"line":315},[49,847,318],{"class":55},[49,849,21],{"class":59},[49,851,77],{"class":55},[49,853,854,856,858],{"class":51,"line":325},[49,855,105],{"class":55},[49,857,210],{"class":59},[49,859,77],{"class":55},[49,861,862],{"class":51,"line":334},[49,863,338],{"emptyLinePlaceholder":337},[49,865,866,868,870],{"class":51,"line":341},[49,867,56],{"class":55},[49,869,346],{"class":59},[49,871,77],{"class":55},[49,873,874,876,878],{"class":51,"line":351},[49,875,354],{"class":62},[49,877,358],{"class":357},[49,879,361],{"class":55},[49,881,882,884,886,888,890,892],{"class":51,"line":364},[49,883,63],{"class":367},[49,885,370],{"class":55},[49,887,373],{"class":55},[49,889,376],{"class":72},[49,891,373],{"class":55},[49,893,381],{"class":55},[49,895,896,898,900,902,904,906,908,910,912],{"class":51,"line":384},[49,897,387],{"class":367},[49,899,370],{"class":55},[49,901,392],{"class":59},[49,903,373],{"class":55},[49,905,397],{"class":72},[49,907,373],{"class":55},[49,909,402],{"class":59},[49,911,405],{"class":55},[49,913,409],{"class":408},[49,915,916,919],{"class":51,"line":412},[49,917,918],{"class":367}," methods",[49,920,921],{"class":55},":{\n",[49,923,924,927,930,933,936],{"class":51,"line":424},[49,925,926],{"class":415},"  returnValeu",[49,928,929],{"class":59},"(",[49,931,932],{"class":102},"$event",[49,934,935],{"class":59},")",[49,937,361],{"class":55},[49,939,940,943,946,949,952,955,958,960,962,964,967,969,972,974,976,979,981,985,988],{"class":51,"line":432},[49,941,942],{"class":62},"    let",[49,944,945],{"class":102}," opt",[49,947,948],{"class":55}," =",[49,950,951],{"class":102}," Object",[49,953,954],{"class":55},".",[49,956,957],{"class":415},"values",[49,959,929],{"class":59},[49,961,932],{"class":102},[49,963,954],{"class":55},[49,965,966],{"class":102},"target",[49,968,954],{"class":55},[49,970,971],{"class":102},"options",[49,973,935],{"class":59},[49,975,954],{"class":55},[49,977,978],{"class":415},"filter",[49,980,929],{"class":59},[49,982,984],{"class":983},"s7ZW3","ele",[49,986,987],{"class":62},"=>",[49,989,361],{"class":55},[49,991,992,995,998,1000,1002],{"class":51,"line":443},[49,993,994],{"class":357},"                  return",[49,996,997],{"class":102}," ele",[49,999,954],{"class":55},[49,1001,585],{"class":102},[49,1003,1004],{"class":55},";\n",[49,1006,1007,1010],{"class":51,"line":477},[49,1008,1009],{"class":55},"              }",[49,1011,1012],{"class":59},")\n",[49,1014,1015,1017,1020,1022,1024,1026,1029,1031,1033,1035,1037,1039,1041,1043],{"class":51,"line":506},[49,1016,942],{"class":62},[49,1018,1019],{"class":102}," values",[49,1021,948],{"class":55},[49,1023,945],{"class":102},[49,1025,954],{"class":55},[49,1027,1028],{"class":415},"map",[49,1030,929],{"class":59},[49,1032,984],{"class":983},[49,1034,987],{"class":62},[49,1036,984],{"class":102},[49,1038,954],{"class":55},[49,1040,463],{"class":102},[49,1042,935],{"class":59},[49,1044,1004],{"class":55},[49,1046,1047,1050,1053,1055,1057,1059,1061,1063,1065,1067],{"class":51,"line":536},[49,1048,1049],{"class":55},"    this.",[49,1051,1052],{"class":415},"$emit",[49,1054,929],{"class":59},[49,1056,373],{"class":55},[49,1058,578],{"class":72},[49,1060,373],{"class":55},[49,1062,405],{"class":55},[49,1064,1019],{"class":102},[49,1066,935],{"class":59},[49,1068,1004],{"class":55},[49,1070,1071],{"class":51,"line":544},[49,1072,1073],{"class":55},"  }\n",[49,1075,1076],{"class":51,"line":550},[49,1077,1078],{"class":55}," }\n",[49,1080,1081,1083,1085],{"class":51,"line":556},[49,1082,416],{"class":415},[49,1084,419],{"class":59},[49,1086,361],{"class":55},[49,1088,1089,1091],{"class":51,"line":561},[49,1090,427],{"class":357},[49,1092,361],{"class":55},[49,1094,1095,1097,1099],{"class":51,"line":566},[49,1096,435],{"class":59},[49,1098,370],{"class":55},[49,1100,440],{"class":59},[49,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128],{"class":51,"line":1103},27,[49,1105,446],{"class":55},[49,1107,449],{"class":59},[49,1109,370],{"class":55},[49,1111,373],{"class":55},[49,1113,456],{"class":72},[49,1115,373],{"class":55},[49,1117,405],{"class":55},[49,1119,463],{"class":59},[49,1121,370],{"class":55},[49,1123,373],{"class":55},[49,1125,28],{"class":72},[49,1127,373],{"class":55},[49,1129,474],{"class":55},[49,1131,1133,1135,1137,1139,1141,1143,1145,1147,1149,1151,1153,1155,1157],{"class":51,"line":1132},28,[49,1134,446],{"class":55},[49,1136,449],{"class":59},[49,1138,370],{"class":55},[49,1140,373],{"class":55},[49,1142,33],{"class":72},[49,1144,373],{"class":55},[49,1146,405],{"class":55},[49,1148,463],{"class":59},[49,1150,370],{"class":55},[49,1152,373],{"class":55},[49,1154,32],{"class":72},[49,1156,373],{"class":55},[49,1158,474],{"class":55},[49,1160,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182,1184,1186],{"class":51,"line":1161},29,[49,1163,446],{"class":55},[49,1165,449],{"class":59},[49,1167,370],{"class":55},[49,1169,373],{"class":55},[49,1171,37],{"class":72},[49,1173,373],{"class":55},[49,1175,405],{"class":55},[49,1177,463],{"class":59},[49,1179,370],{"class":55},[49,1181,373],{"class":55},[49,1183,36],{"class":72},[49,1185,373],{"class":55},[49,1187,533],{"class":55},[49,1189,1191,1193],{"class":51,"line":1190},30,[49,1192,539],{"class":59},[49,1194,381],{"class":55},[49,1196,1198],{"class":51,"line":1197},31,[49,1199,547],{"class":55},[49,1201,1203],{"class":51,"line":1202},32,[49,1204,553],{"class":55},[49,1206,1208],{"class":51,"line":1207},33,[49,1209,280],{"class":59},[49,1211,1213],{"class":51,"line":1212},34,[49,1214,533],{"class":55},[49,1216,1218,1220,1222],{"class":51,"line":1217},35,[49,1219,105],{"class":55},[49,1221,346],{"class":59},[49,1223,77],{"class":55},[10,1225,1226,1227,1229],{},"処理が少し長めなのでmethodに切り分けました。",[46,1228,781],{},"の中身で、イベント（選択）が発生したターゲットの要素を捉えるまでは同じですが、その中にvalueではなくてoptionsというプロパティがあります。",[10,1231,1232,1235],{},[46,1233,1234],{},"$event.target.options","は配列ですがHTMLCollectionなのでObject.valuesをもちいて、filter()が使用できる様にしています。",[10,1237,1238,1240,1241,1244],{},[46,1239,1234],{},"には選択肢の",[46,1242,1243],{},"\u003Coption>\u003C\u002Foption>","部分に関する情報が入っており、選択されたか（selected）とその値（value）というプロパティがあります。",[39,1246,1250],{"className":1247,"code":1248,"language":1249,"meta":44,"style":44},"language-javascript shiki shiki-themes material-theme-ocean","let opt = Object.values($event.target.options).filter(ele=>{\n　　return ele.selected;\n})\n","javascript",[46,1251,1252,1292,1305],{"__ignoreMap":44},[49,1253,1254,1257,1260,1262,1264,1266,1268,1271,1273,1275,1277,1280,1282,1284,1286,1288,1290],{"class":51,"line":52},[49,1255,1256],{"class":62},"let",[49,1258,1259],{"class":102}," opt ",[49,1261,66],{"class":55},[49,1263,951],{"class":102},[49,1265,954],{"class":55},[49,1267,957],{"class":415},[49,1269,1270],{"class":102},"($event",[49,1272,954],{"class":55},[49,1274,966],{"class":102},[49,1276,954],{"class":55},[49,1278,1279],{"class":102},"options)",[49,1281,954],{"class":55},[49,1283,978],{"class":415},[49,1285,929],{"class":102},[49,1287,984],{"class":983},[49,1289,987],{"class":62},[49,1291,361],{"class":55},[49,1293,1294,1297,1299,1301,1303],{"class":51,"line":80},[49,1295,1296],{"class":357},"　　return",[49,1298,997],{"class":102},[49,1300,954],{"class":55},[49,1302,585],{"class":102},[49,1304,1004],{"class":55},[49,1306,1307,1310],{"class":51,"line":112},[49,1308,1309],{"class":55},"}",[49,1311,1012],{"class":102},[10,1313,1314,1315,1317,1318,1321,1322,1325,1326,1328],{},"ここで",[46,1316,585],{},"プロパティが",[46,1319,1320],{},"true","か",[46,1323,1324],{},"false","で選択されたかがわかるので、",[46,1327,1320],{},"の要素のみ取得して新しい配列を手に入れます。その配列に対して",[39,1330,1332],{"className":1247,"code":1331,"language":1249,"meta":44,"style":44},"let values = opt.map(ele=>ele.value);\nthis.$emit('newInput', values);\n",[46,1333,1334,1364],{"__ignoreMap":44},[49,1335,1336,1338,1341,1343,1345,1347,1349,1351,1353,1355,1357,1359,1362],{"class":51,"line":52},[49,1337,1256],{"class":62},[49,1339,1340],{"class":102}," values ",[49,1342,66],{"class":55},[49,1344,945],{"class":102},[49,1346,954],{"class":55},[49,1348,1028],{"class":415},[49,1350,929],{"class":102},[49,1352,984],{"class":983},[49,1354,987],{"class":62},[49,1356,984],{"class":102},[49,1358,954],{"class":55},[49,1360,1361],{"class":102},"value)",[49,1363,1004],{"class":55},[49,1365,1366,1369,1371,1373,1375,1377,1379,1381,1384],{"class":51,"line":80},[49,1367,1368],{"class":55},"this.",[49,1370,1052],{"class":415},[49,1372,929],{"class":102},[49,1374,373],{"class":55},[49,1376,578],{"class":72},[49,1378,373],{"class":55},[49,1380,405],{"class":55},[49,1382,1383],{"class":102}," values)",[49,1385,1004],{"class":55},[10,1387,1388,1391,1392,1394],{},[46,1389,1390],{},"map()","を用いて",[46,1393,463],{},"プロパティのみを抽出したものを新しい配列として返し、それを親コンポーネントに渡します。これで選択したものを配列として渡すことが可能になります。",[14,1396,1397],{"id":1397},"値を出力してみる",[10,1399,1400],{},"先ほどの様に選択肢１から順に選択して値の変化を見てみましょう。",[726,1402],{":src":1403,":width":736},"'_mix\u002Fvue-select06-768x203-2.png'",[726,1405],{":src":1406,":width":736},"'_mix\u002Fvue-select05-1.png'",[10,1408,1409],{},"取得された値が順番順番に配列で取得できてますね。親コンポーネントにもちゃんと入っています。これでmultipule属性を持ったセレクトボックスの値を$emitすることができます。",[1411,1412,1413],"style",{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}",{"title":44,"searchDepth":112,"depth":112,"links":1415},[1416,1417,1418,1419],{"id":16,"depth":80,"text":16},{"id":589,"depth":80,"text":590},{"id":739,"depth":80,"text":740},{"id":1397,"depth":80,"text":1397},[1421],"devstack","2026-04-15","multiple属性での複数選択セレクトボックスで選択した値をemitする方法","md",null,{},"\u002Farticles\u002Fmultiple-select-vue",{"title":5,"description":1423},"articles\u002Fmultiple-select-vue",[1431,201],"js","_mix\u002Fvue-select06-768x203.png","VP5RFAbgJFA3otr_esQFmbFyOCNxilN184p7o6oAQZo",1780987139552]