Добрый день!
Только изучаю Vue.js, возник следующий вопрос:
есть экземпляр Vue и компонент со своим шаблоном и списком переменных. Мне нужно, чтобы при прорисовке элементов у каждого элемента был свой v-show и, соответственно, свои условия для отображения, чтобы в дальнейшем менять их видимость.
Код:
Vue.component('list__', {
props: ['show','show2','show3', 'text'],
template: ' \<transition name="slide" >\
\<div class="class">\
\<div class="class-temp"><span class="class-temp-grad">{{text}}</span><span class="class-temp-C">º</span></div>\
<div class="class-city"></div>\
\</div>\
</transition>\
',
})
var app = new Vue({
el:"#app",
data: {
show:true,
show2:false,
show3:false,
text:'',
list:[],
},
created:function(){
this.getWeather();
},
methods: {
getWeather: function(event) {
axios.get('url').then(response => {
list=[
{
id: 1,
show: true,
show2: false,
show3: false,
text: '123'
},
{
id: 2,
show: false,
show2: true,
show3: false,
text: '123'
},
{
id: 3,
show:false,
show2: false,
show3: true,
text: '123'
}
]
this.list = list;
}).catch(
error => {
console.log(error);
alert("Ошибка");
}
);
},
},
});
<list__
v-for="(todo, index) in list"
v-bind:key="todo.id"
v-bind:show="todo.show"
v-bind:show2="todo.show2"
v-bind:show3="todo.show3"
v-bind:text="todo.text"
v-show="todo.show && !todo.show2 && !todo.show3"
>
</list__>
Помогите, пожалуйста, изучаю Vue недавно, никак додуматься до решения не могу.