vue.js에서 단추의 활성 비활성 활성화

하고 싶은 일이지만'A, B, C'라는 버튼이 있어 처음에는 다들 활발한 상태였다.
버튼을 누를 수 있는 상태죠.
A를 누르면 B, C의 버튼이 비활성화됩니다.
"B"단추를 누르면 "A, C"단추가 비활성으로 변합니다.
의 버튼 이외의 버튼은 비활성화하려고 합니다.
이것만 보면 뷰.js라면 간단하게 실현할 수 있습니다!내 생각엔

대략적으로 실현된 실현 방법

프로젝트를 만들기 위해 vue-cli에서 init를 실행합니다.
좋아하는 마법 지령이 있으니 여기 기사. 보고 다음 방법으로 만들어보세요.

vue init bootstrap-vue/webpack-simple my-project

구성 샘플

확장된 파일의 Vue 파일을 수정하여 다음 구성 요소를 만들었습니다.

my-project
　　┣　dist
　　┣　node_modules
　　┣　src
　　┃　　　　┣　component
　　┃　　　　┃　　　　┣　Panel01.vue
　　┃　　　　┃　　　　：
　　┃　　　　┣　App.vue
　　┃　　　　┣　Navigation.vue
　　┃　　　　┣　MainPanel.vue
　　┃　　　　┗　main.js
　　┣　package-lock.json
　　┣　package.json
　　：

main.js에서 앱을 사용합니다.vue 마운트 설명, App.vue에router-views 기재
MainPanel의 컨텐트(Panel 01)를 전환할 수 있습니다.

버튼 활성화 전환 방법

MainPanel에서 Buton, Panelx를 가져옵니다.vue로 전환하고 싶어서요.
다음과 같은 기술을 하였다.여기도 필요한 곳만 대충 적혀 있다.

<template>
  <div id="main-panel" class="content-ground p-0 m-0">
    <div class="content-base d-flex p-1 border border-dark">
      <div id='quest-container' class="content-ground p-0 m-0">
        <b-container class="content-main border border-dark">
          <panel01></panel01>
          <panel02></panel02>
          <panel03></panel03>
        </b-container>
      </div>
      <ul class="d-inline">
        <li>
          <button id="push-btn-1" class="btn"
                  v-on:click="pushedBtn(1)" :disabled="isPush1">button 1</button>
        </li>
        <li>
          <button id="push-btn-2" class="btn"
                  v-on:click="pushedBtn(2)" :disabled="isPush2">button 2</button>
        </li>
        <li>
          <button id="push-btn-3" class="btn"
                  v-on:click="pushedBtn(3)" :disabled="isPush3">button 2</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// childrens
import Panel01 from './component/Panel01.vue'
import Panel02 from './component/Panel02.vue'
import Panel03 from './component/Panel03.vue'

export default {
  name: 'main-panel',
  components: {
    Panel01, Panel02, Panel03
  },
  data: () => {
    return {
      isPush1: false,
      isPush2: false,
      isPush3: false,
    }
  },
  methods: {
    pushedBtn: (s) => {
      if(s === 1){
        this.isPush1 = false;
        this.isPush2 = true;
        this.isPush3 = true;
      } else if ( s === 2) {
        this.isPush1 = true;
        this.isPush2 = false;
        this.isPush3 = true;
      } else if ( s === 3) {
        this.isPush1 = true;
        this.isPush2 = true;
        this.isPush3 = false;
      }
    }
  },
  created() {
    console.log(this)
  }
}
</script>

버튼의 활성을 시도해 보세요.

상술한 기술을 통해 로컬에서 동작을 확인한 후 단추의 활성 상태는 변하지 않는다.
이상해, 콘솔.log를 통해 상응하는 bool 값을 출력합니다
vue-devols로 확인했어요.
"push Btn"방법의 마지막 bool 값을 출력할 때, 좋은 단추를 누르는 것 이외에는 모두 사실입니다
'disabled'를 on으로 만들다.하지만 버튼은 변하지 않았다.
vue-devols에서 수치를 보면 모두 거짓이고 변화가 없다.
무무라고 생각하고 끊임없이 더듬어 다음과 같은 사실을 발견했다.

VueComponent로 인식되지 않음

이번 친자관계를 표현하자면.

root
　　┗App
　　　　　　┣　Navigation
　　　　　　┗　MainPanel
　　　　　　　　　　┗　Panel01

이런 나무.
MainPanel.vue 내methods에서console를 시도합니다.로그(this)를 출력해 보았습니다.
결과적으로 이 녀석은'object'로 여겨져 데이터가 발표한 값을 포함하지만component 속성과 유사한 것은
"a"변수에 저장됩니다.(물론 활성화 전환 값은 변하지 않습니다)
App.vue에서 마찬가지로 methods에서this를 출력할 때 여기는 Vue Component입니다.
▶ 앱으로 this 출력
(변수명이나 글의 편집 관계로 캡처하기 불편한 부분이 있음)

▶ MainPanel 출력this(위 경우)

서브어셈블리가 VueComponent가 되지 않습니다.

아마 친자관계가 된 부모님의 부분이 긍정적으로 변할 것 같아요.
서브어셈블리의 MainPanel 아래는 어셈블리에 속하지 않는 것 같습니다.
하지만 textarea와 label의'문자를 입력하면 탭에 미리 보기'가 조합되어 있다고 합니다.
MainPanel 이하에서도 작업을 수행할 수 있습니다.요소에서 온 Input 이벤트와 v-model을 사용할 수 있다면
적극적으로 살다.왜...??
또한, 구성 요소 처리가 되지 않기 때문에, 등록은 vue를 감지하여 동작을 활성화할 수 있습니다this.$set 방법도 undifined로 바뀌었다.원래는 달러로 환불할 수 있는 함수가 없는 상태였다.

원인을 규명하기 위해 무서운 시간을 소비하다

나는 각양각색의 보도를 읽고, 공식 문서 등도 읽으며, 모색해 보았다
"버튼의 비활성은 v-bind를 통해 데이터의 bool 값을 바꿀 수 있습니다!"
재부팅하려면 값 set 또는 Object.assign()을 사용합니다.이렇게 할 수밖에 없어요.
Object로 처리된 원인을 찾을 수 없습니다.
나도 테라테일에게 문제를 제기했지만 해결될 기미가 보이지 않아 2주 동안 이 조사를 진행했는데...

가식 없이 피하다

결국 순수한 자바스크립트의 문법으로 활성 비활성을 조종하기로 했다.
가장 가까운 앱.분명히 vue가 만들었어, 아이의 MainPanel.vue에서 더 이상 활약할 수 없습니다..
이번에는 기술 향상을 목적으로 하는 것이 아니라 실장과 체험을 제공하는 것을 주요 목적으로 한다window.document.getElementById('push-btn-1').setAttribute('disabled', 'disabled') window.document.getElementById('push-btn-1').removeAttribute('disabled')변경합니다.
음~~~ 징그러워--!!!!

해소 방법

댓글창에 받은@knaito-531씨는 "Arrow 함수"가 원인일 수 있다고 지적했다.
▶ 이하 지역...

<script>
methods: {
    pushedBtn: (s) => {
      if(s === 1){
      :
      :
      :
    }
</script>

▶ 다음과 같이 수정됐다.

<script>
methods: {
    pushedBtn (s) {
      if(s === 1){
        :
        :
        :
    }
</script>

지적한 바와 같이 ARO 함수 사용을 중지해 보십시오
버튼의 활성 비활성에 새로운 변화가 생겼다!!

참고 자료

(무단 링크. 불편하시면 알려주세요.)
/버튼의 활성 비활성 전환 (잘못된 것 같습니까? 대답을 보았습니다)
Vue.js disabled 버튼을 누르지 않는 방법
・데이터 속성 변경에 대한 체크
(복습 개념. 원래 함수는 undifined이기 때문에 적용할 수 없습니다.)
데이터 속성에 등록된 객체의 수정 사항을 감지하는 방법
개념 복습
능동적 탐색 - Vue.js