Vue 2 - 从db

时间:2017-01-19 23:16:30

标签: javascript vue.js vuejs2

我将Vue 2用于一个小型博客项目。我有一个单独的帖子表单组件,其中一个表单输入是一个选择(用于帖子的类别)。从DB中提取类别后,将填充select。该组件还从父组件获取一个post对象,该对象也从db中获取(参见props:[' post'])。 这是代码: // HTML ... < select class =" form-control" V模型=" post.category_id">     <选项         v-for =" cat in categories"         V-绑定:值=" cat.id">         {{cat.name}}     < /选项> < /选择> ... // JS module.exports = {     道具:[' post',' url'],     名称:' postForm',     created:function(){         this.syncCats()     },     方法: {         syncCats:function(){             此$ http.get(" / API /类别&#34)。             .then(function(res){                 this.categories = res.data             })         }     },     data:function(){         返回{             类别:{}         }     } } 我遇到的问题是默认情况下没有选择任何选项。看起来像这样。但是当我打开选择时,我会从我的数据库中看到这两个类别。 我想默认选择正确的(post.category_id == cat.id)值。我该怎么做? 我试过< select ...:v-bind:selected =" post.category_id == cat.id">但同样的事情。 编辑 好的,现在我尝试像这样转储post.category_id和cat.id: < div class =" form-group">   <标签>类别< /标签>   < select class =" form-control" V模型=" post.category_id">     <选项         v-for =" cat in categories"         :值=" cat.id"         :selected =" cat.id == post.category_id">         {{cat.name}} {{cat.id}} {{post.category_id}}     < /选项>   < /选择> < / DIV> 在我选择任何选项之前的结果是 - 只有cat.id被打印,post.category_id没有。然而,在我选择了一些选项后,我也会出现post.category_id,就像这样。注意" 1"在我选择了其中一个选项({{post.category_id}}之后,最后只出现在第二个屏幕截图中。 这意味着帖子在类别之后加载,并且我应该以某种方式在加载后重新初始化选择。我该怎么做?作为参考,这是获取帖子的父组件。 <模板>     < span id =" home">         < postForm:post =" post" :URL =" URL">< / postForm>     < /跨度> < /模板> <脚本> var postForm = require(' ../ forms / post.vue') module.exports = {     名称:' postEdit',     created:function(){         这个。$ 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(){         返回{             发布:{},             网址:""         }     },     组件: {         postForm     } } < /脚本>

2 个答案:

答案 0 :(得分:2)

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

您甚至可以通过停用<select>来添加一些额外的可用性糖,直到postcategories都被加载...

<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 demo~ https://jsfiddle.net/1oqjojjx/267/

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

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

答案 1 :(得分: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
            }
        })
    }
},