使用动态值填充 vue-form-generator 的选择字段答案

【问题标题】：Populate vue-form-generator's select field with dynamic values使用动态值填充 vue-form-generator 的选择字段
【发布时间】：2018-02-01 11:59:49
【问题描述】：

我有一个问题，我正在尝试用数据填充选择。控制台错误：

vue.js:584 [Vue 警告]：渲染错误：“TypeError: Cannot read property 'forEach' of undefined”

无法读取未定义的属性“forEach”

Vue.use(VueFormGenerator)
var app = new Vue({
 el: '#app',
  data:{
  ...
  provincias:[{id:"baires", name:"Buenos Aires"}],
  ...
  
,formOptions: {
  validationErrorClass: "has-error",
  validationSuccessClass: "has-success",
  validateAfterChanged: true
 }
,form_datos:{
  fields:[{
  ...
  {
      type: "select",
      label: "Provincia:",
      model: "dp_provincia",
      required:true,
      values: this.provincias, 
      validator:VueFormGenerator.validators.string,
      styleClasses:'col-md-6'
   }
  ...
 ]
 }
}
,created() {
  var res = VueFormGenerator.validators.resources;
  res.fieldIsRequired = "Este campo es requerido.";
 }
,methods:
bla bla bla

为什么我不这样做？

值：[{id:"baires", name:"Buenos Aires"}]

而不是值：this.provincias ???

因为我想用从调用 api rest 获得的数据填充选择。这些硬类型的值就是一个例子。

小提琴：https://jsfiddle.net/1e3k87us/1/

谢谢

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

而不是戳入 vue，provide a function 用于 values prop....

data: function() {
  return {
    dynamicProvinces: [ 'default', 'provinces', 'here' ],
    form_datos: {
      fields: [
        {
          type: "select",
          label: "Provincia:",
          model: "dp_provincia",
          // provide a function for values...
          values: (model, schema) => {
            this.dynamicProvinces
          },
        }
      ]
    }
  }
},
created() {
    // set province values however you like, for example, from an API
    getProvincesAPI.then(provinces => {
      this.dynamicProvinces = provinces
    })
}

【讨论】：

【解决方案2】：

好的，我解决了，您需要将值留空

{
 type: "select",
      label: "Provincia:",
      model: "dp_provincia",
      required:true,
      values: [], 
      validator:VueFormGenerator.validators.string,
      styleClasses:'col-md-6'
}

您可以从方法中访问 values 属性

var fiel=app.$root.form_datos.fields.find(field => field.model === 'dp_provincia');
fiel.values=[{id:"0", name:"example"}];

我认为 fiel.values=this.provincias;也可以工作

【讨论】：