javascript - 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 .请注意最后的“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

您需要设置 selected适当的属性 <option>并遵守 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: []
  }
}