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

【问题标题】：v-model on existing data from external api来自外部 api 的现有数据的 v-model
【发布时间】：2022-01-14 08:52:32
【问题描述】：

遇到了一些问题。

我正在运行一个带有 laravel + 惯性自定义 cms 的下一个 js 前端，我有我的下一个 js 应用程序设置，以便我可以通过 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，则此函数将返回一个包含以下数据的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>

这就是我的问题出现的地方，我可以添加新的翻译并删除现有的翻译。但我不确定如何正确地将v-model 连接到现有的翻译，以便可以编辑和更新它们。

基本上是这样的

  <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"/>

【问题讨论】：

标签： laravel vue.js inertiajs

【解决方案1】：

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

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

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

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

【讨论】：

嘿，这很好用。谢谢！