Я делаю свой первый компонент Vue 2 (в приложении Laravel 5.3), но сталкиваюсь с проблемой экземпляра/области, которую я потратил часы, пытаясь решить, но просто не может заставить его работать!Vue 2 Loop для доступа к контенту в контуре Loop - экземпляр/область вопроса
Мой компонент генерирует список заказов, и в каждом порядке есть список пользователей (советников). Я хочу иметь возможность выбрать пользователя для заказа, а затем назначить пользователя для заказа.
Последняя версия моего компонента выглядит так:
Vue.component('unassigned-orders', {
template: `
<table id="assignOrder" class="table table-hover">
<thead>
// table headers
</thead>
<tr v-for="(unassignedOrder, key) in unassignedOrders"
:key="unassignedOrder.order_id">
<td>{{ unassignedOrder.order_id }}</td>
<td>{{ unassignedOrder.first_name }} {{ unassignedOrder.last_name }}</td>
<td>{{ unassignedOrder.order_status }}</td>
<td><select @change="assignAdvisor()">
<option v-for="advisor in advisors" :value="advisor.id" >
{{ advisor.first_name }} {{ advisor.last_name }}
</option>
</select></td>
<td><a class="btn btn-default">
Set Advisor {{ unassignedOrder.assignTo }}</a></td>
</tr>
</table>`,
data: function() {
return {
unassignedOrders: [{'assignTo' : ''}],
advisors: ''
}
},
methods: {
assignAdvisor: function() {
this.assignTo = event.target.value;
}
},
mounted() {
axios.get('url').then(response => this.advisors = response.data);
axios.get('url').then(response => this.unassignedOrders = response.data);
}
});
Я не получаю никаких ошибок, но функциональность не работает (мне просто нужно обновить var assignTo в соответствующем порядке, я уверен, что я буду в состоянии понять все остальное уходит).
Уверен, что мне не хватает чего-то действительно простого, у кого есть какие-то указатели?
Благодаря
Принимал быстрый взгляд на примере коде Что происходит, если добавить свойство 'assignTo' в объекте, возвращаемого методом данных компоненты? Вы можете установить значение «null» или пустую строку. – wing
Я пробовал это ранее, т. Е. Имел 'assignTo: '',' на своей собственной строке в функции данных, в отличие от вложенных в unassignedOrders, но имел тот же результат, т. Е. Ничего .. – Ash
Ahh okai. Я пытаюсь лучше понять, чего вы пытаетесь достичь. Вот моя интерпретация - поправьте меня, если я ошибаюсь. Ваш компонент отображает представление списка элементов, называемых 'unassignedOrders'. Когда 'select' в ненаписанном порядке испускает событие' change', он должен установить свойство 'assignTo' этого порядка. Правильно ли это звучит? – wing