使用動態值填充 vue-form-generator 的選擇字段

Question

我有一個問題，我想用數據填充一個選擇。 控制台錯誤：

vue.js:584 [Vue 警告]：渲染錯誤：“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", name:"Buenos Aires"}]

而不是值：this.provincias ???

因為我想用我從調用 api rest 中獲得的數據填充選擇。 這些硬類型值就是一個例子。

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

謝謝

Answer 1

與其深入研究 vue，不如為 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
    })
}

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