来自外部 api 的现有数据的 v-model

Question

运行有点问题。

我是运行下一个带有 laravel + 惯性自定义 cms 的 js 前端，我有我的下一个 js 应用程序设置，这样我就可以通过阅读 t运行slation 文件API 调用以在 cms 内部显示。

例如我有一个 TranslationsAPI.php 文件，其中包含一些函数，其中一个称为 getTranslations，看起来像这样

    public function getTranslations(string $locale, string $file): mixed
    {
        $data = [];

        $response = Http::get(config('app.frontend_url') . 'api/read-translations?locale=' . $locale . '&file=' . $file);

        if ($response->successful()) {
            $data = $response->json();
        }
        return $data;
    }

如果将语言环境参数设置为 en-US 并将文件参数设置为 common.json，此函数将 return 包含以下数据的 json 对象：

{
  "intro": "NOT_TRANSLATED",
  "new": "NOT_TRANSLATED",
  "info": "NOT_TRANSLATED",
  "back": "NOT_TRANSLATED",
  "touch": "NOT_TRANSLATED",
  "name": "NOT_TRANSLATED",
  "email": "NOT_TRANSLATED",
  "message": "NOT_TRANSLATED",
  "send": "NOT_TRANSLATED",
  "copyright": "NOT_TRANSLATED",
  "about": "NOT_TRANSLATED",
  "contact": "NOT_TRANSLATED",
  "change-locale": "NOT_TRANSLATED",
  "errorFetching": "NOT_TRANSLATED",
  "loadingFetching": "NOT_TRANSLATED"
}

现在在我的 TranslationsController 中调用此方法

    public function index(Request $request): Response
    {

        if ($request->input('language')) {
            return Inertia::render('Translations/index', [
                'translations' => $this->getTranslations->getTranslations($request->input('language'), $request->input('file')),

            ]);
        }

        return Inertia::render('Translations/index', [
            'translations' => $this->getTranslations->getTranslations('nl-NL', 'common.json'),
        ]);
    }

并将其显示在我的 vue 组件中

    props: {
        translations: {
            type: Object,
            default: null
        },

        files: {
            type: Object,
            default: null
        }
    },

并将其渲染为输入

                    <div v-if="translations" class="flex flex-col my-2" v-for="(value,index) in translations">
                        <div :key="index" class="form-control">
                            <div class="relative my-2 items-center justify-center flex">
                                <input type="text" placeholder="Your translation string"
                                       name="translation-key"
                                       class=" pr-16 input input-primary input-bordered mx-2" :value="index"/>

                                <input type="text" placeholder="Your translation string"
                                       name="translation-value"
                                       class=" pr-16 input input-primary input-bordered mx-2" :value="value"/>
                                <button type="button"
                                        class="absolute top-0 right-0 rounded-l-none btn btn-error no-animation"
                                        @click="removeInput(index)">delete
                                </button>
                            </div>
                        </div>
                    </div>

这就是我的问题所在，我可以添加新的 t运行slations 并删除现有的。但我不确定如何正确地将 v-model 连接到现有的 t运行站点，以便可以对其进行编辑和更新。

基本上是这样的

  <input type="text" placeholder="Your translation string"
         name="translation-key"
         v-model="somethinghere" <--- this needs to be a v-model to update the existing translations
         class=" pr-16 input input-primary input-bordered mx-2" 
         :value="index"/>

Answer 1

您可以像这样直接引用对象（translations 是您示例中的对象）：

<input
    type="text"
    v-for="(item, key) in translations" v-model="translations[key]"
    :name="'translations[' + key + ']'"
/>

请注意，您不能使用v-model="item"（循环变量），因为它指的是循环中的局部解构变量。如果你这样做，基本上什么也不会发生。

我已经为输入提供了 name，但这取决于您将如何保存表单，因为您可以正常提交表单并让浏览器处理它，或者在JavaScript 通过在 AJAX 请求中自己发送 translations 对象。

来自外部 api 的现有数据的 v-model

v-model on existing data from external api

inertiajs

laravel

vue.js