vue 컴포넌트를 새로고침하려면 어떻게 해야 합니까?

vue 컴포넌트를 새로고침하려면 어떻게 해야 합니까?

솔루션은 다음과 같이 프로펠러 데이터를 업데이트하는 것입니다.

this.selectedContinent = ""

하지만 나는 다른 해결책을 사용하고 싶다.

몇 가지 레퍼런스를 읽은 후 해결 방법은 다음과 같습니다.

this.$forceUpdate()

시도해 봤지만 소용없다

다음과 같은 데모 및 전체 코드:

https://jsfiddle.net/Lgxrcc5p/13/

버튼 테스트를 클릭하여 시도할 수 있습니다.

속성 데이터 업데이트 이외의 솔루션이 필요합니다.

컴포넌트에 키를 할당해야 합니다.구성 요소를 다시 렌더링하려면 키만 업데이트하면 됩니다.자세한 것은 이쪽.

<template>
    <component-to-re-render :key="componentKey" />
</template>

export default {
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    forceRerender() {
      this.componentKey += 1
    }
  }
}

v-if를 사용하여 구성 요소를 렌더링합니다.

<div id="app">
      <button type="button" @click="updateComponent">test</button>
      <test-el v-if="show"></test-el>
</div>

데모

사용할 수 있습니다.Object.assign초기 데이터 속성을 할당합니다.

대신this.$forceUpdate()

를 사용해 주세요.Object.assign(this.$data,this.$options.data.call(this)).

여기 이걸 쓰고 있어요.$138.data는 원본 데이터를 가져와 이 값을 여기에 할당합니다.$data.

업데이트된 바이올린 링크를 참조하십시오.

업데이트:

다른 방법: 링크

새로고침이 필요하다고 생각했지만 마운트된 훅 내의 모든 것을 init 방식으로 이동할 수 있었습니다.마운트된 후크는 init 메서드를 호출합니다.부모가 모든 것을 새로고침해야 할 경우 ref를 사용하여 호출할 수 있습니다.$refs.componentName.init();.

가장 간단한 것

오브젝트 내의 데이터의 경우 키를 JSON.stringify(data)로 사용합니다.

  <component :key="JSON.stringify(data)" :data="data" />

상태를 갱신하기만 하면 됩니다.

$vm.data={
name:'balaji'
}

컴포넌트가 자동으로 갱신됩니다.

vuejs3의 경우:

<template>
  <render-component :key="count" />
  <span @click="renderComponent">Click to reload render-component</span>
</template>

<script>
import { ref } from 'vue'
export default {
   setup() {
    const count = ref(0)

    const renderComponent = () => {
     count.value++
    }
    return {
     count,
     renderComponent
    }
   }
}
</script>

요점을 파악하다

저도 같은 문제에 직면해 있습니다.나는 사용했다location.reload()컴포넌트를 새로고침합니다.
이것은 이 문제를 해결하는 올바른 방법이 아닐 수 있습니다.하지만 이것으로 내 문제는 해결되었다.

언급URL : https://stackoverflow.com/questions/46211297/how-can-i-reload-a-vue-component