Я пытаюсь получить доступ к 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?
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 а> В этом примере я просто вручную ввел какое-то фиктивное значение для массива.
Удалить эту часть:
data: function() {
return {
job_execs: job_execs
}
}
И обновите шаблон:
<ul id="example-1">
<li v-for="item in this.job_execs">
{{ item.build_id }}
</li>
</ul>
Похожие вопросы
Новые вопросы
vue.js
Vue.js - это прогрессивная среда Javascript с открытым исходным кодом для создания пользовательских интерфейсов, которые стремятся к постепенному внедрению. Vue.js в основном используется для фронт-энда и требует промежуточного уровня HTML и CSS. Вопросы, связанные с версией Vue.js, должны быть помечены [vuejs2] или [vuejs3].