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

Question

我只使用Vue已有2周了，一切都进行得很顺利，而且一切似乎都有意义，但是我无法理解以下内容。

我正在基于存储在数据库中用于user首选项的选项生成一组选择输入 。 在某些情况下， user将已经为某些或全部选择了选项。

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

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

blade.php中的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代码（子组件）

Vue.component('dashboard-hero-preferences-email-preferences', {
    props: ['user','preferences','currentPreferences'],

    data() {
        return {
            updated: null,
            selected: [],
            updatePreference: null
        };
    },

    methods: {
        updatePreferences(preference) {
            this.updatePreference = preference;

            axios.post('/dashboard/preferences/update', {
                preference: preference.id,
                value: this.selected[preference.id]
            })
            .then(() => {
                this.$emit('update');
                this.updated = 'yes';
            });
        }
    }
});

谢谢大卫

Answer 1

我通过将以下安装的方法添加到email-preferences.js来解决此问题，这要感谢上面的@luceos输入。

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;
            })
        })
    },