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

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: {}
        }
    }
}

我遇到的问题是默认情况下没有选择任何选项。 看起来像这样。 但是当我打开选择时，我会从我的数据库中看到这两个类别。

我想默认选择正确的（ 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>

在我选择任何选项之前的结果是这样的——只有cat.id被打印， post.category_id没有。 但是，在我选择一些选项后，我post.category_id出现，就像这样。 请注意，在我选择了其中一个选项后，最后的“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>

Answer 1

您需要在适当的<option>上设置selected属性并遵守 Vue 的单向数据流范例。

您甚至可以通过禁用<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> 

有关详细信息，请参阅组件 - 使用自定义事件的表单输入组件。

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