VueJs - 메서드 간 변수 전달

VueJs - 메서드 간 변수 전달

이 있습니다.v-select컴포넌트 및 변경 시 기동합니다.fillData(selected)여기서 선택한 것은v-model라벨 갱신이 필요합니다.datacollection.datasets.label거스름돈으로그걸 어떻게 하는 거죠?

<script>
  import BarChart from './BarChart.js'
  import { mapGetters, mapActions } from "vuex";

  export default {
    name : "TestLegPerformance",
    components: {
      BarChart
    },
    data: () => ({   
      datacollection : {
          labels: ['Week-1','Week-2','Week-3'],
          datasets: [
            {
                label: '',
                backgroundColor: '#C58917',
                data: [40, 50, 20]
            }
          ]
        },
      selected: []

    }),
     computed: {
        ...mapGetters({
        planNames: "planNames"
        })
    },
    mounted () {
        this.getAllPlanNamesAction();
    },
    methods: {
      ...mapActions(["getAllPlanNamesAction"]), 
      fillData(selected){
          console.log(selected)
      },
    }
  }
</script>

내부 메서드에서는 다음을 참조할 수 있습니다.data속성 사용this.

고객님의 경우this.datacollection.datasets.label할당:

methods: {
  // ...
  fillData(selected){
     this.datacollection.datasets[0].label = selected;
  },
}

물론, 이 가정은selected에 할당하는 문자열입니다.label.

주의:this를 사용하여 메서드를 선언한 경우에만 동작합니다.methodName() {}(있는 그대로) 또는methodName: function (){...따라서 vue 메서드를 선언할 때 화살표 기능을 사용하지 마십시오. 그러면 vue 메서드가 잘못될 수 있습니다.this.

이벤트 바인드 방법@(v-on)는 없습니다.: v-bind)

템플릿:

<v-select label="Select a Plan" :items="planNames" v-model="selected" single-line max-height="auto" :change="fillData(selected)" required >

변경 이벤트를 청취하려면 다음을 사용하지 마십시오.

:change="fillData(selected)"

사용하다

@change="fillData"

논쟁을 일으키지 마라. (그것은 일을 망칠 것이다.) v-select이미 보내드리겠습니다.

의 교환에 주의해 주세요.:와 함께@.

첫 번째는:에일리어스입니다.v-bind.그렇게:change="xyz"와 같다v-bind:change="xyz".

두 번째는@에일리어스입니다.그러니까@change="xyz"와 같다v-on:change="xyz"그게 네가 원하는 거야

여기에서 데모 JSFiddle을 참조하십시오.

업데이트 중label의vue-chartjs의BarChart자동으로

당신이 그렇더라도

• 믹스인
• 라벨 변경

그래프는 자동으로 변경을 반영하지 않습니다(라벨은 변경되지 않습니다).

그래프가 내부 속성이 아닌 전체 변경에만 반응하기 때문에 이러한 현상이 발생한다는 것을 알게 되었습니다(예:label).

해결책은 다음과 같습니다.

• 클론datacollection
• 을 갱신하다label복제의
• 클론을 할당하다this.datacollection

그러면 차트가 반응합니다(라벨 변경이 반영됩니다).

그럼, 당신의 옷을 갈아입어요.fillDatamethod를 다음과 같이 설정합니다.

fillData(selected){
    let collectionClone = Object.assign({}, this.datacollection);
    collectionClone.datasets[0].label = selected;
    this.datacollection = collectionClone;
},

이 솔루션의 동작 데모 코드&박스를 확인해 주세요( 참조).changeLabelAndReassign()의 방법BarChart.vue).

언급URL : https://stackoverflow.com/questions/49027373/vuejs-passing-variables-between-methods