На странице нужно отобразить select, данные приходят с запроса т.е. на сервер организована функция для всех запросов, соответственно когда данные приходят то компонент уже отрендерен, есть ли способ отрендерить компонент с пришедшими данными. Вообще идея такая с сервера приходит ответ, "заполняется" select, потом то что выбрано в селекте используется как фильтр. Сейчас организовано так:
const store = new Vuex.Store({
strict: true,
state:{
user:{
name:'Name',
id:0,
password:'password',
history:[],
},
nomenclature:'none',
page:'',
pangination:{
length:0
},
},
mutations: {
nomenclature(state,resp){
var nomenclature={};
nomenclature.manufacture=resp.manufacture;
nomenclature.group=resp.group;
nomenclature.model=resp.model;
state.nomenclature=nomenclature;
}
},
getters:{
arrModel:state=>{
var list=[];
var history=state.user.history;
for (var i = 0; i < history.length; i++) {
if (list.indexOf(history[i].modelID)===-1) list.push(history[i].modelID);
};
return list;
}
}
});
var select={
template:'<select>'+
'<option>Все</option>'+
'<option v-for="item in arrModel">item</option>'+
'</select>',
computed:{
arrModel(){return this.$store.getters.arrModel;}
}
}
var tableUserHistory = {
props:['view'],
template:'<div>'+
'<table class="highlight">'+
'<tr>'+
'<th class="center">№</th>'+
'<th class="center"> Модель'+
'</th>'+
'<th class="center">'+
'Статус'+
'</th>'+
'<th class="center">'+
'№ Изделия'+
'</th>'+
'<th class="center">'+
'Дата'+
'</th>'+
'<th class="center">Комментарий</th>'+
'</tr>'+
'<tr>'+
'<th class="center"></th>'+
'<th class="center"> '+
'<div>{{test}}</div>'+
'<my-select></my-select>'+
'</th>'+ .....''
components:{
'my-select':select,
}
var userHistory = {
data:function(){
return {
view:{
tableRows:8,
currentPage:0
}
}
},
template:'<div>'+
'<find></find>'+
'<table-user-history v-bind:view="view"></table-user-history>'+
'<pagination v-bind:view="view" v-on:currentPageChange="currentPageChange"></pagination>'+
'</div>',
methods:{
currentPageChange:function(page){this.view.currentPage=page}
},
computed:{
userHistory() {return this.$store.state.user.history},
},
components:{
'table-user-history':tableUserHistory,
'pagination':pagination
}
};
var main = new Vue({
el:'.vMain',
data:{
user:{id:0, name:'Name', password:'password'},
page:'user-history', //start page
},
store,
methods:{
setPage:function(page){
this.page=page;
console.log(page)
},
outUser:function(){$storage.writeToken('out')}, //clear token, href reload page
},
components:{
'user-history':userHistory,
'admin-page':adminPage,
}
});
Вот в этом случае в консоле все данные отображаются все как бы все хорошо, но вот селект не изменяется, до этого был опыт работы с AngularJS. Вот в ангуляре есть функция компиляции шаблона, я так думаю что и в Vue должно быть что то подобное. Ну или какой-то другой подход нужен, пробывал через render? результат тот же.