@Theon196

Как отображать компоненты во Vue с разными v-show?

Добрый день!
Только изучаю 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">&ordm;</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 недавно, никак додуматься до решения не могу.
  • Вопрос задан
  • 325 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы