Vue.js - доступ к данным с динамическими компонентами - PullRequest
Новая
       9

Vue.js - доступ к данным с динамическими компонентами

0 голосов
/ 06 июля 2018

У меня есть простая веб-страница, которая показывает список результатов, и пользователи могут переключаться между стилем table или li .

Я получил простое Vue с двумя динамическими компонентами: массив результатов и список результатов .

Это работает как талисман, за исключением случаев, когда я переключаюсь с первого компонента на второй: я теряю свойства результатов, называемые усами (я получил пустые значения без ошибок): 

{{contact.img_path}} does not show anything

тогда * * 1016 

<img :src="contact.img_path" /> works great

** ОБНОВЛЕНИЕ ** Вот упрощенный jsfiddle, чтобы попробовать: https://jsfiddle.net/eywraw8t/151906/

Мои файлы:

contact.js 

var list = Vue.component('results-list', {
    template: '#results-list-template',
    props: ['display_mode', 'contacts']
});

var table = Vue.component('results-array', {
    template: '#results-array-template',
    props: ['display_mode', 'contacts'],
});

const app = new Vue({
    el: '#app',
    router,
    data: {
        currentResultsView: 'results-array',
        display_mode:       'array',
        contacts:           [],
        contact:            { company: {}, phones: {}, section: {}, schedule_type: {}}, // Declaring Reactive Properties
        phone:              {} // Declaring Reactive Properties
        },
    created () {
      this.navigate(this.$route.query.page);
    },

    methods: {
        changeDisplay: function(event, type){
            this.currentResultsView = (type == "array") ? "results-array" : "results-list";

            this.display_mode = type;
            console.log('contacts', this.contacts[0].lastname) // WORKS !
            },
        navigate: function(page){
            var page = page > 0 ? page : 1;
            axios.get('/', {params: {page: page, fulltext_search: this.fulltext_search, sort_dir: this.sort_dir}})
                .then((response) => {
                    this.contacts = response.data.entries;
                });
        }
    }
});

index.html 

<ul>
  <li @click="changeDisplay($event, 'hcard')" :class="{active:display_mode == 'hcard'}">Carte de visite</li>
  <li @click="changeDisplay($event, 'vcard')" :class="{active:display_mode == 'vcard'}">Vignette verticale</li>
  <li @click="changeDisplay($event, 'array')" :class="{active:display_mode == 'array'}">Tableau</li>
</ul>

<div id="app">

  <script type="text-x-template" id="results-array-template">
    <table>
      <tr>
        <th></th>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr v-for="contact in contacts">
        <td><img :src="contact.img_path" class="contact_img" /></td>
        <td>{{ contact.firstname }}</td>
        <td>{{ contact.lastname }}</td>
      </tr>
    </table>
  </script>

  <script type="text-x-template" id="results-list-template">
    <ul>
      <li v-for="contact in contacts">
        {{contact.firstname}} <!-- **Does not show anything** -->
        <img :src="contact.img_path" /> <!-- **Works great!** -->

      </li>
    </ul>
  </script>

  <div id="results" :class="display_mode" class="clearfix">
    <keep-alive>
      <component v-bind:is="currentResultsView" :display_options="display_options" :display_mode="display_mode" :contacts="contacts" ></component>
    </keep-alive>
  </div>

</div>

Ответы [ 2 ]

0 голосов
/ 10 июля 2018

Решение состоит в том, чтобы переместить два сценария шаблона за пределы #app div

0 голосов
/ 09 июля 2018

Вы должны либо удалить ключ contact из data части вашего корневого экземпляра Vue, либо использовать другое имя в итераторе v-for (например, v-for="myContact in contacts")

UPDATE

Кроме того, вы не должны использовать теги script для шаблона - используйте вместо него template, поскольку Chrome игнорирует теги script, отличные от JavaScript. Решение - https://codepen.io/TMCDOS/pen/gjYWNY

...