我是新来的Vue(约,并在阅读文档是非常有帮助的,常常在不能得到我应该如何实现所需的行为的情况。
我做了几个小部件以获取道具传递和处理事件的感觉,所以现在我想使东西有点大,但现在面临一些困难。
这种困难来自以下梗:
我想有一个通过一个初始化的定制选择组件v-for
循环。 我所想的,同时有机会获得所选选项这些组件。 我可以绑定与该选择数据v-model
的容器循环在包装中选择组件,但我努力让这些信息出来的包装,又独自一人。
注:我使用的汇总和单个文件的组成部分
顶层
<template >
<div>
<select-container
v-for="(select, index) in selects"
:index="index"
:key="select.id"
:select.sync="select"
/>
</div>
</template>
<script>
import selectContainer from './select-container.vue';
export default {
components: { selectContainer },
props: {
records: {
default: function(){return{}},
type: Object
}
},
data: function() {
return {
selects: [{}, {}]
}
},
computed: {
},
methods: {
}
}
</script>
<style scoped>
</style>
选择容器
<template>
<div>
<my-select
v-model.sync="select"
/>
</div>
</template>
<script>
import mySelect from './my-select.vue';
export default {
components: { mySelect },
props: {
index: { type: Number },
select: {
type: Object,
default: function(){return{}}
}
},
data : function(){
return {
}
},
methods: {
},
computed: {
}
}
</script>
<style scoped>
</style>
我选
<template>
<select v-model="selected">
<option
v-for="(attr, index) in attributes"
:value="attr"
:selected="attr == selected"
>
{{attr}}
</option>
</select>
</template>
<script>
export default {
props: {
attributes: {
type: Array,
default: function() {
return []
}
}
},
data: function() {
return {
selected: ""
}
}
}
</script>
<style scoped>
</style>