Как получить дочерний компонент после добавления данных перед рендерингом? - PullRequest
Новая
       2

Как получить дочерний компонент после добавления данных перед рендерингом?

0 голосов
/ 20 мая 2019

Я хочу установить некоторые реквизиты дочернего компонента после добавления данных, но как я могу это сделать?

В приведенном ниже примере я хочу выбрать элемент, добавленный в методы additem(), как я могу реализовать его в Vue? 

Vue.component('list-item', {
    props: ['text'],
    data() {
        return {
            selected: false,
        }
    },
    methods: {
        click() {
            this.selected = true;
        }
    },
    template: `
        <li v-bind:class="{ selected : selected }" v-on:click="click">{{text}}</li>
    `
});

var idx = 0;
Vue.component('list', {
    data() {
        return {
            list: [],
        }
    },
    methods: {
        additem() {
            this.list.push("li " + idx++);
        }
    },
    template: `
        <div>
            <button v-on:click="additem">Add</button>
            <ul>
                <list-item v-for="item in list" v-bind:text="item"></list-item>
            </ul>
        </div>
    `
});

var demo = new Vue({
    el: "#demo"
});
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <style>
        li.selected {
            color: red;
        }
    </style>
    <list id="demo"></list>
    <script src="./stackoverflow.js"></script>
  </body>
</html>

1 Ответ

0 голосов
/ 20 мая 2019

Вы не можете. Элемент списка потеряет свои данные после повторного рендеринга.

Необходимо добавить выбранное свойство к объекту item в компоненте списка. 

Vue.component('list-item', {
    props: ['item'],
    methods: {
        click() {
            this.$emit('clicked');
        }
    },
    template: `
        <li :class="{ selected : item.selected }" @click="click">{{ item.text }}</li>
    `
});

var idx = 0;
Vue.component('list', {
    data() {
        return {
            list: [],
        }
    },
    methods: {
        additem() {
            this.list.push({
                text: "li " + idx++,
                selected: false,
            });
        },
        onClick(item) {
            item.selected = !item.selected;
        },
    },
    template: `
        <div>
            <button v-on:click="additem">Add</button>
            <ul>
                <list-item 
                    v-for="item in list"
                    :item="item"
                    @clicked="onClick(item)"
                    :key="item.text">
                </list-item>
            </ul>
        </div>
    `
});

var demo = new Vue({
    el: "#demo"
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...