Nova 工具：使用工具的“api.php”中定义的路由将异步数据从数据库传递到 Vue.JS 中的 v-model答案

【问题标题】：Nova Tool: Passing async data from database using a route defined in the Tool's "api.php" to a v-model in Vue.JSNova 工具：使用工具的“api.php”中定义的路由将异步数据从数据库传递到 Vue.JS 中的 v-model
【发布时间】：2021-06-09 09:25:46
【问题描述】：

我创建了一个 Laravel 8 自定义工具。它包含两个输入。例如：<input v-model="month_price" name="month_price" id="month_price" type="text" class="w-full form-control form-input form-input-bordered" />。

在 Vue.JS 文件中我设置了这个 data 函数：

<script>
export default {
    metaInfo() {
        return {
          title: 'Appprices',
        }
    },

    data: function () {
        let vue = this;

        Nova.request().get('get_app_prices')
        .then(response => {
            vue.month_price = response['month_price'];
            vue.year_price = response['year_price'];
        });
    },

}
</script>

它应该调用我 Nova 的工具的 api.php 路由文件的路由 get_app_prices，定义为：

Route::get('/get_app_prices', function (Request $request) {
    return ['year_price' => 12, 'month_price' => 24];   
})->name('get_app_prices');

但是，我的输入中没有看到“12”和“24”。不返回错误。有什么问题？

编辑（部分解决方案）：

正确的 URL 是 Nova.request().get('/nova-vendor/appprices/get_app_prices_values')。现在我正确地获得了我的 PHP 代码返回的良好值。但是这些字段仍然没有填写，我不明白为什么。

【问题讨论】：

标签： laravel vue.js laravel-nova

【解决方案1】：

以下脚本有效：

<script>
export default {
    metaInfo() {
        return {
          title: 'Appprices',
        }
    },

    data() {
        return {
            month_price: 0,
            year_price: 0,
        }
    },

    created() {
            this.getDataFromApi()
     },

    methods: {
        
        getDataFromApi() {
            Nova.request().get('/nova-vendor/appprices/get_app_prices_values')
            .then(response => {
                this.month_price = response.data.month_price;
                this.year_price = response.data.year_price;
            });
        }
        
    }

}
</script>

【讨论】：