버튼을 Vue.js로 전환하려면 어떻게 해야 합니까?

버튼을 Vue.js로 전환하려면 어떻게 해야 합니까?

주의: 기능 및 스타일링에는 Vue.js 및 Vuetify.js를 사용합니다.

와 함께:class그리고.@click속성: 버튼의 배경색을 원하는 색으로 변경할 수 있었지만, 버튼은 클릭한 것뿐만 아니라 모든 항목에 적용됩니다.

질문:.한 번에 모든 버튼을 전환하지 않고 버튼을 전환하려면 어떻게 해야 합니까?

내 vue 파일에서:

<v-layout>
  <v-flex md6>
    <v-text-field>Welcome.</v-text-field>
  </v-flex md6>
  <v-flex id="icon-filter">
    <span>Filter by:</span>
    <v-btn class="filter-button" :class="{toggled: isToggled}" @click="isToggled = !isToggled"><v-icon>local_offer</v-icon></v-btn>
    <v-btn class="filter-button" :class="{toggled: isToggled}" @click="isToggled = !isToggled"><v-icon>notifications</v-icon></v-btn>
  </v-flex>
</v-layout>

에서script동일한 vue 파일의 섹션:

<script>
  export default {
    data: function() {
      return {
        companies,
        msg: "indiv",
        dashboards: ['profile', 'charts'],
        isToggled: false
      }
    },
    methods: {

    }
  }
</script>

이 질문을 다 읽었는데 Vue 경고가 나와서isToggled메서드를 이미 정의된 데이터 속성으로 지정합니다.항목 Vue.js 클래스 전환

데이터 바인딩에 대한 vue.js 문서도 읽어보았습니다만, 아직 도움이 필요합니다.https://vuejs.org/v2/guide/class-and-style.html

Vuetify 프레임워크는 버튼 컴포넌트를 전환했지만 클라이언트는 다른 스타일을 원하기 때문에 사용할 수 없습니다.https://vuetifyjs.com/components/buttons

다른 vue 파일 만들기(button.vue라고 함)...

button.vue

// template
<v-btn class="filter-button" :class="{toggled: isToggled}" @click="isToggled = !isToggled">
  <slot></slot>
</v-btn>

// script
export default {
  data: function () {
    return {
      isToggled: false
    }
  }
}

당신의_부모님.표시하다

// script
import CustomButton from './button.vue'

export default {
  components: { CustomButton },
  data...
}

// template
<v-layout>
  <v-flex md6>
    <v-text-field>Welcome.</v-text-field>
  </v-flex md6>
  <v-flex id="icon-filter">
    <span>Filter by:</span>
    <custom-button><v-icon>local_offer</v-icon></custom-button>
    <custom-button><v-icon>notifications</v-icon></custom-button>
  </v-flex>
</v-layout>

주의: CustomButton그리고.button.vue편리한 이름으로 변경할 수 있습니다.

이렇게 하면 각각custom-button이제 전환할 수 있는 자체 데이터를 가질 수 있습니다!

나는 사용할 것이다.@click함수와 함께 를 통과합니다.$eventjavascript를 사용합니다.classList.togglecss 클래스를 적용하거나 사용하는 함수.toggle()그 밖에 하고 싶은 것은 무엇이든 한다.;

@click="myToggleFunction($event)"

그리고나서

methods: {
   myToggleFunction: function(event){
        let button = event.target;
        button.classList.toggle('toggled');
   }
}

언급URL : https://stackoverflow.com/questions/46814304/how-do-you-toggle-a-button-with-vue-js