Я использую Vue 2 для небольшого блога. У меня есть отдельный компонент для формы сообщения, и один из входов формы - это select (для категории сообщения). Выбор заполняется после получения категорий из БД. Компонент также получает объект post
от родительского компонента, который также извлекается из базы данных (см. props: ['post']
).
Вот код:
// HTML
...
<select class="form-control" v-model="post.category_id">
<option
v-for="cat in categories"
v-bind:value="cat.id">
{{ cat.name }}
</option>
</select>
...
// JS
module.exports = {
props: ['post', 'url'],
name: 'postForm',
created: function() {
this.syncCats()
},
methods: {
syncCats: function() {
this.$http.get("/api/categories")
.then(function(res) {
this.categories = res.data
})
}
},
data: function() {
return {
categories: {}
}
}
}
Проблема, с которой я столкнулся, заключается в том, что ни один из параметров не выбран по умолчанию. Похоже, это. Но когда я открываю выбор, я вижу обе категории из моей базы данных, например this.
Я хочу выбрать правильное (post.category_id == cat.id
) значение по умолчанию. Как бы я это сделал?
Я пробовал <select ... :v-bind:selected="post.category_id == cat.id">
, но случилось то же самое.
Изменить
Хорошо, теперь я попытался сбросить и post.category_id
, и cat.id
вот так:
<div class="form-group">
<label>Category</label>
<select class="form-control" v-model="post.category_id">
<option
v-for="cat in categories"
:value="cat.id"
:selected="cat.id == post.category_id">
{{ cat.name }} {{ cat.id }} {{ post.category_id }}
</option>
</select>
</div>
И до того, как я выберу какой-либо вариант, результат будет this - печатается только cat.id
, post.category_id
- нет. Однако после того, как я выберу какой-либо вариант, также появится post.category_id
, например this. Обратите внимание, что цифра «1» в конце появляется только на втором снимке экрана после того, как я выбрал один из вариантов - {{ post.category_id }}
.
Это означает, что сообщение загружается после категорий и что я должен каким-то образом повторно инициализировать выбор после его загрузки. Как бы я это сделал? Для справки, это родительский компонент, который получает сообщение.
<template>
<span id="home">
<postForm :post="post" :url="url"></postForm>
</span>
</template>
<script>
var postForm = require('../forms/post.vue')
module.exports = {
name: 'postEdit',
created: function() {
this.$http.get('api/posts/slug/' + this.$route.params.slug)
.then(function(response) {
if(response.status == 200) {
this.post = response.data
this.url = "/api/posts/slug/" + response.data.slug
}
})
},
data: function() {
return {
post: {},
url: ""
}
},
components: {
postForm
}
}
</script>