VueJS - список с сервера отображается только когда я изменяю жестко запрограммированную строку и сохраняю .vue - PullRequest
Новая
       6

VueJS - список с сервера отображается только когда я изменяю жестко запрограммированную строку и сохраняю .vue

0 голосов
/ 18 июня 2019

Мы создаем приложение, используя Vue, новые для концепций Vue.При попытке разработки дизайна для извлечения списка записей с сервера и отображения в Div, мы видим, что список извлекается при загрузке страницы, НО отображается только тогда, когда мы изменяем жестко запрограммированную строку в файле .vue.Например: добавление дополнительных «s» к имени «Nikhil Dass» в жестко запрограммированном массиве или удаление одного символа и последующее сохранение файла .vue немедленно отображает список.Это очень странно, но я надеюсь, что мы сделали что-то не так.Благодарим вас за помощь в исправлении.

-------- Home.vue 

<template>
    <div class="home">
        <h1>{{ msg }}</h1>
        <p>Welcome to your new single-page application, built with <a href="https://vuejs.org" target="_blank">Vue.js</a>.</p>
        <div class="members">
            <h2>External Members</h2>
            <div class="holder">
                <ul>
                    <li v-for="(member, index) in svrmembers" :key='index'>{{index}}. {{member.empname}}</li>
                </ul>
            </div>
        </div>
        <div class="localmembers">
            <h2>Local Members</h2>
            <div class="holder">
                <ul>
                    <li v-for="(member, index) in localmembers" :key='index'>{{index}}. {{member.empname}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import * as mykey from './app.js'
    export default {
        name: 'Home',
        props: {
            msg: String
        },
        data() {
            return {
                svrmembers: mykey.memberList.resp,
                localmembers: [
                    { "empname": "Nikhil Dass" },
                    { "empname": "Kapil Koranne" }
                ]
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
...