从 VueJS JSON Schema 获取模型组件值

Question

我在 vuejs、Vuetify 和以下库中有一个项目，使用带注释的 JSON 模式动态生成表单： https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/about

库很棒，完全可以满足我的需求，从 JSON 方案生成表单，我什至可以添加自己的组件，并将其显示在表单上，唯一缺少的是我无法获取将组件数据插入模型。

你可以在这里找到我的例子： https://codepen.io/eran-levi/pen/jOqjroa

这是我添加组件的方式：

<template slot="rating" slot-scope="{key, value, update, schema }" class="field">
      <star-rating :value="value" @rating-selected="update($event, key)" :show-rating="false" />
    </template>

并在架构中 JSON:

rating: {
      type: "number",
            title: "Rating",
            minimum: 0,
            maximum: 5
        }

如您所见，点击“显示数据”按钮后，您可以看到您编辑的每个字段的结果，以及我添加的新星组件的值..

我在这里错过了什么？

谢谢。

Answer 1

您缺少 update 方法。

我添加了 updateRating 方法并将其绑定到 @rating-selected 事件。

这是一个有效的 fiddle：https://jsfiddle.net/9pjdxht6/1/

vue-star-rating分量：

<star-rating :value="value" @rating-selected="updateRating" :show-rating="false" />

更新评级方法：

updateRating: function(rating){
    this.model.rating = rating;
}

希望对你有帮助。

从 VueJS JSON Schema 获取模型组件值

Get model component value from VueJS JSON Schema

jsonschema

vue.js

vue-component

vuetify.js