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

Question

我将 Vue 2 用于一个小型博客项目。我有一个用于帖子表单的单独组件，其中一个表单输入是一个选择（用于帖子的类别）。从数据库中获取类别后，选择会被填充。该组件还从父组件获取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。但是当我打开选择时，我会从我的数据库中看到这两个类别，例如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。请注意，在我选择了其中一个选项（{{ post.category_id }}）之后，末尾的“1”仅出现在第二张屏幕截图中。

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

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

Answer 1

您需要在适当的<option> 上设置selected 属性并遵守Vue 的one-way data flow 范例。

您甚至可以通过禁用<select> 来添加一些额外的可用性糖，直到post 和categories 都被加载...

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

和

methods: {
  setCategoryId(categoryId) {
    this.$emit('input', parseInt(categoryId))
  }
}

那么，在包含上述的Vue实例/组件中，简单的使用

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

更多信息请参见Components - Form Input Components using Custom Events。

JSFiddle 演示~https://jsfiddle.net/1oqjojjx/267/

---

仅供参考，我还将 categories 初始化为一个数组，而不是一个对象...

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

Answer 2

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

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
            }
        })
    }
},