Я пытаюсь получить доступ к job_execs из компонента stage-execs в шаблоне ...

Job_execs создается в корне vue, и я пытаюсь получить к нему доступ, вызывая его в подпорках компонента stage-execs.

<div id="vue-job">
<div class="column">
    <div class="row">
        <h3>test</h3>
        <stage-execs></stage-execs>
    <br><br>
</div>
</div>


<script>
    Vue.component('stage-execs', {
        delimiters: [ '[[', ']]' ],
        props: ['job_execs'],
        data: function() {
                return {
                    job_execs: job_execs
                }
            },
        template: `
        <ul id="example-1">
          <li v-for="item in job_execs">
            [[ item.build_id ]]
          </li>
        </ul>
        `,
    });

    var v_root = new Vue({
        delimiters: [ '[[', ']]' ],
        el: '#vue-job',
        data: {
            job_execs: []
        },
        created() {
            url="http://{{ api_endpoint }}"
            fetch(url)
                .then(response => response.json())
                .then(body => {
                    for(i=0; i<body.length; i++){
                        this.job_execs.push({
                            'build_id': JSON.stringify(body[i].build_id),
                            'status': JSON.stringify(body[i].status.name),
                        })
                    }
            })
            .catch( err => {
                console.log('Error Fetching:', url, err);
                return { 'failure': url, 'reason': err };
            });

        },
    });

Как правильно получить доступ к job_execs в компоненте stage-execs?

0
david 30 Май 2019 в 01:52

2 ответа

Лучший ответ

В VueJS вы всегда передаете данные от родителя (root в вашем случае) компоненту (компонент stage-execs) с помощью реквизита.

Итак, чтобы ответить на ваш вопрос

Как правильно получить доступ к job_execs в компоненте stage-execs?

Ответ: с опорой. Определите опору для вашего компонента и передайте значение от родителя.

В вашем компоненте вы определили реквизиты job_execs, но ничего не пропустили.

<stage-execs></stage-execs>

Это пропало, это опора. Таким образом, ваш HTML должен быть:

<div id="vue-job">
<div class="column">
    <div class="row">
        <h3>test</h3>
        <stage-execs :job_execs="job_execs"></stage-execs>
    <br><br>
</div>
</div>

Обратите внимание на разницу в компоненте.

Я связываю реквизиты job_execs в вашем компоненте со свойством data job_execs в вашем корне. Обратите внимание, что : job_execs= является эквивалентом v-bind:job_execs= и является ссылкой на ваши реквизиты в вашем компоненте. Переданное значение является свойством данных вашего корня. Извините, если я слишком преувеличиваю, я просто пытаюсь избежать путаницы, так как свойства компонента и свойства данных в корне имеют одно и то же имя.

В вашем компоненте нет необходимости создавать свойство данных с именем job_execs, и на самом деле вы никогда не должны называть свои свойства данных и поддерживать одно и то же имя. Смотрите:

Так как я передал значение в реквизит. Теперь я могу пройти через это.

Я сделал рабочий пример для codepen: https://codepen.io/bergur/pen/eaPdyv

В этом примере я просто вручную ввел какое-то фиктивное значение для массива.

1
Bergur 30 Май 2019 в 00:41

Удалить эту часть:

data: function() {
     return {
         job_execs: job_execs
     }
}

И обновите шаблон:

<ul id="example-1">
    <li v-for="item in this.job_execs">
        {{ item.build_id }}
    </li>
</ul>
0
Mitro 29 Май 2019 в 23:06