Javascript Vue 2-如何选择正确的<；选择>；从数据库中获取数据后的选项

我将VUE2用于一个小型博客项目。我有一个单独的组件用于post表单，其中一个表单输入是select（用于post类别）。从数据库中获取类别后，将填充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: {}
        }
    }
}

在我选择任何选项之前，结果是只打印

cat.id

，而不打印

post.category\u id

。但是，在我选择某个选项后，我将

post.category\u id

也会出现，如下图所示。注意，在我选择了一个选项后，末尾的“1”仅出现在第二个屏幕截图中，即

{{post.category_id}}

这意味着文章是在类别之后加载的，我应该在加载后以某种方式重新初始化select。我该怎么做？作为参考，这是获取文章的父组件

<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>

var postForm=require（“../forms/post.vue”）
module.exports={
名称：“postEdit”，
已创建：函数（）{
this.$http.get（'api/posts/slug/'+this.$route.params.slug）
.然后（功能（响应）{
如果（response.status==200）{
this.post=response.data
this.url=“/api/posts/slug/”+response.data.slug
}
})
},
数据：函数（）{
返回{
职位：{}，
网址：“
}
},
组成部分：{
postForm
}
}

您需要在相应的

上设置

selected

属性，并遵循Vue的范例

您甚至可以通过禁用

添加一些额外的可用性糖，直到

post

和

类别

都被加载

<select class="form-control" 
        :disabled="!(post.category_id && categories.length)"
        @input="setCategoryId($event.target.value)">
  <option v-for="cat in categories"
          :value="cat.id"
          :selected="cat.id == post.category_id">
    {{cat.name}}
  </option>
</select>

然后，在包含上述实例/组件的Vue实例/组件中，只需使用

<post-form :post="post" :url="url"
           v-model="post.category_id"></post-form> 

---

您应该能够执行以下操作：

methods: {
    syncCats: function() {
        this.$http.get("/api/categories")
        .then(function(res) {
            this.categories = res.data 
            if(!this.post.category_id) { 
               this.post.category_id = this.categories[0].id
            }
        })
    }
},

---

我认为这不会起作用，因为当组件第一次呈现时，将不会出现

categories[0]

。另外，

v-init

的文档在哪里？在任何地方都看不到它，但我不想覆盖

post.category\u id

。它已经有一个值（这是一个编辑表单）。如果

post.category\u id

已经有一个值，那么默认情况下应该选中它，如果您在创建和编辑案例中都使用它，那么您可以在未定义时为

this.post.category\u id

指定一个值，否则就按原样使用它。我会更新这个答案。您是否可以为此创建一个提琴。它已经有了一个值。我已经用更多的信息更新了这个问题。问题是类别被获取，然后select初始化，然后post被获取，这显然不会再次重新初始化select。我已经发布了两个屏幕截图，显示了非常奇怪的行为，

post.category\u id

只有在我选择其中一个选项后才会显示。这违反了组件之间的范例eah，这对于初始化到数组是有意义的。然而，这并没有解决我的问题。我现在尝试在所有选择的名称中转储

cat.id

和

post.category\u id

，结果只有

cat.id

被打印出来，直到我选择其中一个选项，然后

post.category\u id

也被打印出来。因此，我非常确定，在获取帖子后，我必须以某种方式重新设置select。我该怎么做？@devk啊，我认为这符合Vue.js的原则。您可能不应该试图在

post

上修改

category\u id

。尝试使用我的答案，并省略

v-model

。我将对illustrateThanks进行一些更新，以支持我并帮助我：）。晚上回家后，我会尝试更新的答案。

<post-form :post="post" :url="url"
           v-model="post.category_id"></post-form> 

data () {
  return {
    categories: []
  }
}

methods: {
    syncCats: function() {
        this.$http.get("/api/categories")
        .then(function(res) {
            this.categories = res.data 
            if(!this.post.category_id) { 
               this.post.category_id = this.categories[0].id
            }
        })
    }
},