Как изменить класс одного объекта внутри контейнера Vue? - PullRequest
Новая
       0

Как изменить класс одного объекта внутри контейнера Vue?

1 голос
/ 24 февраля 2020

Я хочу изменить класс, если один объект в контейнере Vue, если нажата кнопка. Без контейнера можно использовать опцию v-bind: class, как показано ниже, но в контейнере это не работает для меня. Что я могу сделать?

(просто для пояснения, в этом примере слушатель v-on: click работает как надо)

боковая панель. vue: 

  <template>    
        <div class="content-list" id="content-buttons">
            <a class="content-list-item" v-on:click="$emit('showece')" v-bind:class="{ 'content-list-item-brand': selectedece }">
                <p style="text-align: center">ECE</p>
            </a>
            <a class="content-list-item">
                <p style="text-align: center">Service2</p>
            </a>                    
        </div>
    </template>

    <script>
        export default {
            name:"sidebar" ,
            props: {

            },
        }
    </script>

main. vue: 

<template>
  <div id="app" class="container-fluid">
    <sidebar v-on:showece="vueshowece"></sidebar>
  </div>
</template>

<script>
  var showece=false;
  var selectedece=true;
  import sidebar from '@/components/Sidebar.vue'

  export default {
    name: 'app',
    components: {
      sidebar,
    },
    data () {
      return {
        text:'Hallo'

      }
    },
    methods: {
      vueshowece() {
        if (showece==false) {
          showece=true;
          alert("test");
        }  
        else if (showece==true) showece=false;
      }
    },

  };

</script>

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

Я нашел решение.

Сначала мне нужно поместить selectedece в часть данных main. vue (спасибо @an_parubets): 

data () {
  return {
      selectedece:false,
  }
}

После этого Мне нужно отправить эту переменную в другой компонент. Вы можете сделать это с помощью v-bind. См. Здесь в основном. vue: 

<template>
  <div id="app" class="container-fluid">
    <headerbrand v-on:showece="vueshowece"></headerbrand>
    <sidebar v-on:showece="vueshowece" v-bind:selectedece="selectedece"></sidebar>
  </div>
</template>

Кроме того, необходимо, чтобы компонент мог получить это значение, добавив его в секцию реквизита (боковая панель. vue): 

<script>
export default {
    name:"sidebar" ,
    props: {
        selectedece: Boolean,
    },
    data () {
      return {

      }
    },

}
</script>

Наконец, компонент может изменить класс, слушая переменную на главной. vue part.

Здесь есть хорошее введение: https://www.taniarascia.com/getting-started-with-vue/. Это помогло мне найти ошибку.

0 голосов
/ 24 февраля 2020

selectedece переменная недоступна в вашем шаблоне. Переместите его на data; нравится этот код: 

<template>
  <div id="app" class="container-fluid">
     <div class="content-list" id="content-buttons">
        <a class="content-list-item" v-on:click="toggleClass" v-bind:class="{ 'content-list-item-brand': selectedece }">
           <p style="text-align: center">ECE</p>
        </a>
        <a class="content-list-item">
          <p style="text-align: center">Service2</p>
        </a>                    
     </div>
  </div>
</template>

<script>
  import sidebar from '@/components/Sidebar.vue'

  export default {
    name: 'app',
    components: {
      sidebar,
    },
    data () {
      return {
        text:'Hallo',
        selectedece: true,
      }
    },
    methods: {
     toggleClass() {
       this.selectedece = !this.selectedece;
     }
    },
  };
</script>
...