Skip to content

Instantly share code, notes, and snippets.

@gaogao-9

gaogao-9/最小コード.html

Last active November 19, 2015 18:09
Show Gist options
  • Save gaogao-9/c28756d1fe8d129cbcc2 to your computer and use it in GitHub Desktop.
Save gaogao-9/c28756d1fe8d129cbcc2 to your computer and use it in GitHub Desktop.
Download ZIP
Vue.jsでselectタグ内にComponentが入らない件について。
Raw
最小コード.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bug component</title>
<script src="js/vue.js"></script>
</head>
<body>
<h1>selectタグだと中に入らない</h1>
<select id="sel">
<opt-component :items="items"></opt-component>
</select>
<h1>divタグだと中に入る</h1>
<div id="div">
<opt-component :items="items"></opt-component>
</div>
<template id="opt">
<option v-for="item in items" :value="$index">{{item}}</option>
</template>
<script>
var optComponent = Vue.extend({
template: "#opt",
props: ["items"]
});
var selApp = new Vue({
el: "#sel",
data: {
items: [
"hoge",
"fuga",
"piyo",
]
},
components: {
optComponent
},
});
var divApp = new Vue({
el: "#div",
data: {
items: [
"hoge",
"fuga",
"piyo",
]
},
components: {
optComponent
},
});
</script>
</body>
</html>
@gaogao-9
Copy link
Author

実行例です
default

@chitoku-k
Copy link

select 要素は option と optgroup しか中に入れられないので代わりに is で読み込むよ

<select id="sel">
    <option is="opt-component" :items="items"></option>
</select>

@gaogao-9
Copy link
Author

なんやそのわけわからん仕様ｗｗｗｗｗｗｗｗｗｗｗｗｗｗ
って思ったけどHTML5の仕様から考えれば至極当然な気がしてきたありがとうございます

@chitoku-k
Copy link

🍣

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment