2 - Vue 2 - Vue 2 선택 방법2 - Vue 2 - Vue 2 선택 방법2 - Vue 2 - Vue 2 선택 방법

2 - Vue 2 - Vue 2 선택 방법 option after the data is fetched from db db에서 데이터를 가져온 후 옵션I'm using Vue 2 for a small blog project.소규모 블로그 프로젝트에서 Vue 2를 사용하고 있습니다. I have a separate component for post's form and one of the form inputs is a select (for post's category).투고 폼에 대한 별도의 컴포넌트가 있으며, 폼 입력 중 하나가 (투고 카테고리에 대한) 선택입니다. The select gets populated after the categories are fetched from DB.DB에서 카테고리를 가져온 후 선택 항목이 채워집니다. The component also gets a post object from parent component, that is also fetched from the db (see props: ['post']).또한 컴포넌트는 부모 컴포넌트로부터 포스트 오브젝트를 취득하고, 이 오브젝트도 DB에서 가져옵니다(소품: ['post'] 참조). Here's the code: 코드는 다음과 같습니다.// HTML // HTML... ...<select class="form-control" v-model="post.category_id"> <class="form-control" v-model="post.category_id" 선택> <option <옵션> v-for="cat in categories" v-for="범주의 고양이" v-bind:value="cat.id"> v-facebook:value="cat.id"> {{ cat.name }} {{ cat.name }}} </option> </옵션></select> </select>... ... // JS // JSmodule.exports = { module.module = { props: ['post', 'url'], 소품: ['post', 'url', name: 'postForm', 이름: '포스트 폼', created: function() { 작성: function() { this.이것.syncCats() syncCats() }, }, methods: { 메서드: { syncCats: function() { syncCats: function() { this.이것.$http.get("/api/categories") $180.gets/api/categories") .then(function(res) { . then ( function ( res ){ this.categories = res.data this.categories = res.data }) }) } } }, }, data: function() { 데이터: function() { return { 반환 { categories: {} 카테고리: {} } } } }} } The problem I'm having is that none of the options is selected by default.문제는 기본적으로 선택되는 옵션이 없다는 것입니다. It looks like this.이렇게 생겼어요. But when I open the select I see both categories from my db like this.그러나 선택 항목을 열면 다음과 같이 내 DB에서 두 카테고리가 모두 표시됩니다. I want to select the correct (post.category_id == cat.id) value by default.기본적으로 올바른(post.category_id == cat.id) 값을 선택합니다. How would I do this?이거 어떻게 해요? I've tried <select ...나는 <선택...>을 시도했다. :v-bind:selected="post.category_id == cat.id"> but same happened.:v-category:selected ="post.category_id == cat.id" > 단, 같은 일이 발생하였습니다. Edit 편집Okay so now I've tried dumping both post.category_id and cat.id like this: 네, post.category_id와 cat.id을 모두 다음과 같이 덤프하려고 했습니다.<div class="form-group"> <div class="form-group"> <label>Category</label> <label> 카테고리 </label> <select class="form-control" v-model="post.category_id"> <class="form-control" v-model="post.category_id" 선택> <option <옵션> v-for="cat in categories" v-for="범주의 고양이" :value="cat.id" : value="cat.id" :selected="cat.id == post.category_id"> : selected="cat.id == post.category_id"> {{ cat.name }} {{ cat.id }} {{ post.category_id }} {{ cat.name }} {{ cat.id }} {{post.category_id }} </option> </옵션> </select> </select></div> </div> And the result before I select any option is this - only cat.id gets printed, post.category_id does not.옵션을 선택하기 전의 결과는 다음과 같습니다.cat.id만 출력되고 post.category_id는 출력되지 않습니다. However after I select some option I post.category_id appears as well, like this.다만, 몇개의 옵션을 선택하면, 다음과 같이 post.category_id 도 표시됩니다. Notice how the "1" at the end only appears in 2nd screenshot, after I've selected one of the options, which is the {{ post.category_id }}.옵션 중 하나인 {{post.category_id}를 선택한 후 두 번째 스크린샷에는 끝의 "1"이 표시됩니다. This implies that the post is loaded after the categories and that I should somehow reinitialize the select after it's loaded.이는 게시물이 카테고리 뒤에 로드되고 로드된 후 선택을 다시 초기화해야 함을 의미합니다. How would I do this?이거 어떻게 해요? For reference this is the parent component that fetches the post.참고로 게시물을 가져오는 상위 구성 요소입니다. <template> <blocks> <span id="home"> <span id="home"> <postForm :post="post" :url="url"></postForm> <post Form:post="post":url="url"> </post Form> </span> </span></template> </filters><script> <스크립트>var postForm = require('..var postForm = 필수../forms/post.vue') /forms/post.vue') module.exports = { module.module = { name: 'postEdit', 이름: 'postEdit', created: function() { 작성: function() { this.이것.$http.get('api/posts/slug/' + this.$128.get-api/syslog/' + 이거.$route.params.slug) $route.params.displays) .then(function(response) { . then ( function ( response ) { if(response.status == 200) { if(response.status == 200) { this.post = response.data this.post = response.data this.url = "/api/posts/slug/" + response.data.slug this.url = "/api/syslog/syslog/" + response.data.syslog" } } }) }) }, }, data: function() { 데이터: function() { return { 반환 { post: {}, 투고: {}, url: "" URL: " " } } }, }, components: { 컴포넌트: { postForm 포스트 폼 } }} }</script> </script>You'll need to set the selected attribute on the appropriate <option> and adhere to Vue's one-way data flow paradigm.선택한 속성을 적절한 <옵션>으로 설정하고 Vue의 단방향 데이터 흐름 패러다임에 따라야 합니다. You can even add some extra usability sugar by disabling the <select> until both the post and categories are loaded...투고와 카테고리가 모두 로드될 때까지 <select>를 무효로 하는 것으로, 유저빌리티 설탕을 추가할 수도 있습니다. <select class="form-control" <select class="폼 컨트롤" :disabled="!(post.category_id && categories.length)" :disabled="! (post.category_id & categories.length) @input="setCategoryId($event.target.value)"@input="setCategoryId($event.target.value)"> > <option v-for="cat in categories" <옵션 v-for="카테고리 내 고양이" :value="cat.id" : value="cat.id" :selected="cat.id == post.category_id"> : selected="cat.id == post.category_id"> {{cat.name}} {{cat.name}} </option> </옵션></select> </select> and 그리고.methods: { 메서드: { setCategoryId(categoryId) { set Category Id(category Id) { this.이것.$emit('input', parseInt(categoryId)) $emit('input'), parseInt(categoryId) } }} } Then, in the Vue instance / component that includes the above one, simply use 그리고 위의 Vue 인스턴스/컴포넌트에서는 다음 명령어를 사용하여<post-form :post="post" :url="url" <post-form:post="post":url="url" v-model="post.category_id"></post-form> v-model="post.category_id"> </post-form> See Components - Form Input Components using Custom Events for more information.자세한 내용은 구성요소 - 사용자 정의 이벤트를 사용한 양식 입력 구성요소를 참조하십시오. JSFiddle demo ~ https://jsfiddle.net/1oqjojjx/267/ JSFiddle 데모 ~https://jsfiddle.net/1oqjojjx/267/ FYI, I'd also initialise categories to an array, not an object...참고로, 카테고리를 객체가 아닌 배열로 초기화합니다. data () { 데이터() { return { 반환 { categories: [] 카테고리: [] } }} }You should be able to do something like following: 다음과 같은 작업을 수행할 수 있습니다.methods: { 메서드: { syncCats: function() { syncCats: function() { this.이것.$http.get("/api/categories") $180.gets/api/categories") .then(function(res) { . then ( function ( res ){ this.categories = res.data this.categories = res.data if(!this.post.category_id) { if(!this.post.category_id) { this.post.category_id = this.categories[0].id this.post.category_id = this.categories[0]id } } }) }) } }}, },Reference언급URL : https://stackoverflow.com/questions/41753472/vue-2-how-to-select-the-correct-select-option-after-the-data-is-fetched-fromURL : https://stackoverflow.com/questions/41753472/vue-2-how-to-select-the-correct-select-option-after-the-data-is-fetched-from