我有我的费用跟踪器应用。我在添加费用方面遇到了问题。 我有两个组件负责:addCategory.vue和selectCategory.vue。
这是我的selectCategory.vue组件:
| userName | startDate | endDate | weekDay |
| :---------: | :--------: | :--------: | :-----: |
| Test User 1 | 2011-03-30 | 2011-04-05 | 1 |
| Test User 2 | 2016-10-05 | 2016-10-07 | 5 |
| Test User 3 | 2018-05-22 | 2018-05-26 | 4 |
这是我的addExpense.vue组件:
| userName | startDate | weekDay |
| :---------: | :--------: | :--------: |
| Test User 1 | 2011-03-30 | 1 |
| Test User 1 | 2011-03-31 | 1 |
| Test User 1 | 2011-04-01 | 1 |
| Test User 1 | 2011-04-02 | 1 |
| Test User 1 | 2011-04-03 | 1 |
| Test User 1 | 2011-04-04 | 1 |
| Test User 1 | 2011-04-05 | 1 |
| Test User 2 | 2016-10-05 | 5 |
| Test User 2 | 2016-10-06 | 5 |
| Test User 2 | 2016-10-07 | 5 |
| Test User 3 | 2018-05-22 | 4 |
| Test User 3 | 2018-05-23 | 4 |
| Test User 3 | 2018-05-24 | 4 |
| Test User 3 | 2018-05-25 | 4 |
| Test User 3 | 2018-05-26 | 4 |
我需要帮助,因为当我尝试添加费用时,字段为' categoryId'仍然是空的。 我使用Events来传递类别的名称,但我不知道如何将category.id添加到Expense。
答案 0 :(得分:0)
您的代码中的问题:
您需要添加一个数据属性以保存用户选择的选项,因此添加一个数据属性= selectedCategory
您没有绑定select的选项的值,并且您没有绑定select的值,因此为v-model="selectedCategory"
添加<select>
并添加{{1 } :value="category"
您似乎绑定了<option>
的错误事件(事件= 已选择更可能是您自定义的事件名称),更改为<select>
最后,在@change="selectChange(selectedCategory)"
中,收听event = addExpense.vue
。
如下面演示:
select-cat
Vue.config.productionTip = false
Vue.component('select-category', {
template: `<div>
<select class="custom-select" v-model="selectedCategory" @change="selectChange(selectedCategory)">
<option v-for="category in categories" :value="category">{{ category.title }}</option>
</select>
</div>`,
data() {
return {
categories: [],
errors: [],
selectedCategory: null
}
},
mounted() {
this.categories = [
{'id':1, 'title': 'abc'},
{'id':2, 'title': 'xyz'}
]
},
methods: {
selectChange: function(newCatetory) {
this.$emit('select-cat',newCatetory)
}
}
})
new Vue({
el: '#app',
data() {
return {
categorySelected: null
}
},
watch: {
categorySelected: function (newVal, oldVal) {
console.log('changed to ' + newVal.id + ' from ' + (oldVal ? oldVal.id : oldVal))
}
},
methods:{
chooseCategory: function(data) {
this.categorySelected = data
}
}
})