Question

我只做过<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="lab-list"> <li>Stockholm</li> <li>Delhi</li> <li>Zurich</li> <li>Newyork</li> <li>South hampton</li> <li>Manila</li> <li>Singapore</li> </ul>两周了，一切顺利，一切似乎都说得通，但我无法理解。

我正在根据存储在数据库中的选项为Vue首选项生成一组选择输入。并且在某些情况下，user已经为其中某些或全部选择了选项。

我遇到的问题是我无法获取生成的选择输入来预先填充用户当前的选择。

直到我自动生成输入之前，我一直在填充它。这是我的代码，任何帮助将不胜感激，如果您需要更多信息，请告诉我。我认为我想做的事很明显，似乎Vue代码会覆盖这些值并使它们在生成时为空。

user中的代码

blade.php

<div class="form-group row" v-for="preference in preferences"> <label class="col-md-4 col-form-label text-md-right"> @{{ preference.name }} <span v-if="currentPreferences[preference.id] && currentPreferences[preference.id].value"> <br /> (current: @{{ currentPreferences[preference.id].value }}) </span> </label> <div class="col-md-6"> <select class="form-control" @change="updatePreferences(preference)" v-model="selected[preference.id]"> <template v-if="currentPreferences[preference.id] && currentPreferences[preference.id].value"> <option disabled value="">Please select one</option> <option v-for="item in preference.options" :value="item" :selected="item == currentPreferences[preference.id].value">@{{ item }}</option> </template> <template v-else> <option disabled value="">Please select one</option> <option v-for="item in preference.options" :value="item">@{{ item }}</option> </template> </select> </div> </div>中的代码

hero-preferences.js

Vue.component('dashboard-preferences', { props: ['user'], data() { return { preferences: [], currentPreferences: [] }; }, mounted() { this.getPreferencesData(); }, methods: { getPreferences() { axios.get('/dashboard/preferences') .then(response => { this.preferences = JSON.parse(response.data); }) .catch(response => { this.preferences = []; }); }, getCurrentPreferences() { axios.get('/dashboard/preferences/current') .then(response => { this.currentPreferences = JSON.parse(response.data); }) .catch(response => { this.currentPreferences = []; }); }, getPreferencesData() { this.getPreferences(); this.getCurrentPreferences(); } } });中的代码（子组件）

email-preferences.js

谢谢大卫！

Answer 1

由于上面的@luceos提供了输入，我设法通过将以下装入的方法添加到email-preferences.js来解决此问题。

mounted() {
        var items = null;
        axios.get('/dashboard/preferences/current').then((response) => {
            items = JSON.parse(response.data);

            Object.keys(items).forEach(key => {
                this.selected[key] = items[key].value;
            })
        })
    },

如何使用Vue / Laravel填充自动生成的输入字段

1 个答案: