Vuejs의 데이터에 계산된 속성 사용

Vuejs의 데이터에 계산된 속성 사용

데이터에서 계산된 속성을 사용하거나 버스를 통해 내보내려면 어떻게 해야 하나요?

다음과 같은 vue 인스턴스가 있지만 myComputed는 항상 정의되지 않지만 computedData는 올바르게 작동합니다.

var vm = new Vue({
  data(){
    return{
      myComputed: this.computedData
    }
  },

  computed: {
    computedData(){
      return 'Hello World'
    }
  }
})

불행히도 컴포넌트 작성 타이밍으로 인해 계산된 속성을 데이터에 사용할 수 없습니다.데이터는 계산된 속성보다 먼저 평가됩니다.

가능한 한 심플하게 하기 위해서, 다른 컴포넌트에 변경을 송신하거나 통지할 변수가 많은 경우를 제외하고, Vuex 또는 이벤트버스를 사용할 필요가 있는 경우가 있습니다.

var vm = new Vue({
  data(){
    return{
      myComputed: '',
      computedData: 'Hello World'
    }
  },
  created() {
    this.myComputed = this.computedData;
  },
  watch: {
    computedData() {
      this.myComputed = this.computedData;
    }
  }
});

1. {{ }}을(를) 사용하여 템플릿에서 이미 계산된 항목에 액세스할 수 있습니다.

2. 단,

watch:{
  //your function here
}

계산하지 않고

만약 당신이computed/reactive 물건을 이용한다면 그것은 계산/반응 개체를 사용하는 경우 이 개체는 다음 위치에 있어야 합니다 안에 있어야 한다.computed것이 아니라 내부가 아닌 안에data..

데이터 대신 계산된 코드를 사용하도록 변경하기만 하면 됩니다.

var vm = new Vue({
  data(){
    return{}
  },

  computed: {
    computedData(){
      return 'Hello World'
    },
    myComputed(){
     return this.computedData
    }
  }
})

당신은사용하려고 합니다를 사용하려고 합니까.data~하듯이로computed그리고 이. 데이터computed 개체처럼 행동하지 않지 않아야 한다.작용하지 않습니다 대상처럼데이터가 계산.

컴포넌트 작성 타이밍 때문이 아닙니다.컴포넌트 작성 타이밍을 변경해도 데이터는 첫 번째 계산값(1개만)만 취득하고 이후 업데이트되지 않으므로 아무것도 해결되지 않습니다.

계산된 함수로만 작업할 수 있습니다.

   var vm = new Vue({
      data(){
        return{
          //is not necessary
        }
      },
    
      computed: {
        computedData(){
          return 'Hello World'
        }
      }
    })

템플릿에 추가

<template>
  <div>{{ computedData }}</div>
</template>

당신은 그것을 과대 포장하고 있다.템플릿의 데이터 소품과 동일한 방법으로 계산 소품에 액세스할 수 있습니다.

var vm = new Vue({
  computed: {
    myComputed(){
      return 'Hello World'
    }
  }
})

템플릿에서는 데이터에 대한 액세스와 마찬가지로 다음 항목에 액세스할 수 있습니다.

<template>
  <div>{{ myComputed }}</div>
</template>

https://vuejs.org/v2/guide/computed.html

computed시간현재사용할 수 없습니다에서 이용할 수 없나.data초기화된다.초기화됩니다.

만약 그것이 일회적인 것(및 NOT반응성)이 계산된 속성 사용할 수 있는 순간 다음 명령을 사용하여 계산된 속성을 사용할 수 있는 시점에 데이터를 설정함으로써 이를 달성할 수 있습니다는 1회성(반응하지 않음)일 경우를 사용하여 데이터 설정하여 이것을 달성할 수 있다.created()갈고리:후크:

export default {
  data: () => ({
    myDataBackend: '',
  }),
  computed: {
    computedData () {
      return 'Hello World'
    }
  },
  created() {
    this.$set(this, 'myDataBackend', this.computedData)
  }
}

더 자세한 내용:라이프 사이클 훅에 관한 Vue 매뉴얼

---

혹시가 기능을 사용하여작업하려는 경우와 함께 일하려고 노력하고 있다.v-model:

또,:value으며 일부 이벤트처럼 그런 이벤트도 있고@change또는 또는@keyup대신 엘리먼트에 있습니다.

• :value는, 하는 값입니다.
• 필드에 몇쓴후, 「」는 「」를 해 주세요.@keyup이벤트를 실행하면 데이터가 변경됩니다.
  합니다.target.value
• changeMyData합니다.
• 하고 "데이터 변경"을 리슨합니다.:value갱신됩니다.

주의: 사용하였습니다.data데이터 저장소로 사용할 수 있습니다.대신 vuex를 사용할 수도 있습니다.

<template>
<div>
  <input
    type="text"
    :value="computedData"
    @keyup="changeMyData"
  />
  <p>{{myDataBackend}}</p>
</div>
</template>

<script>

export default {
  data: () => ({
    myDataBackend: 'Hello World'
  }),
  methods: {
    changeMyData(evt) {
        this.$set(this, 'myDataBackend', evt.target.value)
        console.log('Changed the value to: ' + evt.target.value)
    }
  },
  computed: {
    computedData () {
      return this.myDataBackend
    }
  }
}
</script>

메서드에서 계산 변환을 시도합니다.

var vm = new Vue({
  data(){
    return{
      myComputed: this.computedData
    }
  },

  methods: {
    computedData(){
      return 'Hello World'
    }
  }
})

이는 간단하고 효과적이지만(반응적이지 않음) 비용이 발생합니다.

https://medium.com/notonlycss/the-difference-between-computed-and-methods-in-vue-js-9cb05c59ed98

언급URL : https://stackoverflow.com/questions/44318343/use-computed-property-in-data-in-vuejs