Question

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

vue.js：584 [Vue warn]：渲染错误：“TypeError：无法读取未定义的属性'forEach'”

无法读取未定义
的属性'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”，名称：“Buenos Aires”}]

而不是值：this.provincias ???

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

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

由于

Answer 1

使用provide a function代替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
    })
}

Answer 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;也会工作

使用动态值

2 个答案: