Vuex Как привязать магазин к KendoUi-Vue Grid в транспорте читать - PullRequest
0 голосов
/ 21 мая 2018

Я пытаюсь связать данные в интерфейсе Kendo с данными из геттеров Vuex.

Я пробовал следующее, но безуспешно.Пожалуйста, помогите, где мне не хватает чего-то на vuex или на кендо.

Расширения кендо:

<kendo-grid :data-source="kendoDataSource">
</kendo-grid>

Компоненты:

  computed: {
    customers() {
      return this.$store.getters.customers;
    }
  },
  data() {
    return {
      kendoDataSource: {
        schema: {
          data: function(response) {
            return response;
          },
          model: {
            id: "CustomerID",
            fields: {
              CompanyName: { type: "string" },
            }
          }
        },
        transport: {
          read: function(options) {
            options.success(this.customers);
          }
        }
      }    
     };

Я получаю ошибку.TypeError: Cannot read property 'length' of undefined

Когда я пытался отладить this.customers при транспортировке кэндо, объект this.customers всегда равен нулю.

Данные имеют формат, показанный ниже:

[
    {
      "CustomerID": "ALFKI",
      "CompanyName": "Alfreds Futterkiste"
    },
    {
      "CustomerID": "ANATR",
      "CompanyName": "Ana Trujillo Emparedados y helados"
    }
]

Store.js

export default {
  state: {
    customers: JSON.parse(JSON.stringify(customers))
  },
  getters: {
    customers(state) {
      return state.customers;
    }
  }
};

Когда я пытаюсь привязать данные напрямую к options.success(this.customers);

Как показано нижеСетка заполняется данными успешно.Но хотя я пытался связать, используя getters, есть ошибка.

TypeError: Cannot read property 'length' of undefined

  options.success([
        {
          "CustomerID": "ALFKI",
          "CompanyName": "Alfreds Futterkiste",
        },
        {
          "CustomerID": "ANATR",
          "CompanyName": "Ana Trujillo Emparedados y helados",
        }
    ]);

1 Ответ

0 голосов
/ 22 мая 2018

Я думаю, что вы хотите использовать вычисляемые свойства вместо данных.

computed: {
    customers() {
      return this.$store.getters.customers;
    },
    kendoDataSource() {
      const customers = this.customers
      return {
        schema: {
          data: function(response) {
            return response;
          },
          model: {
            id: "CustomerID",
            fields: {
              CompanyName: { type: "string" },
            }
          }
        },
        transport: {
          read: function(options) {
            options.success(customers);
          }
        }
      }
    }
  }
}
...