首頁  >  問答  >  主體

Vue 3:如何使用組合 API 正確更新元件 props 值?

我喜歡這個元件:

<template>
  <div>
    <p>Current coords: <strong>{{ coords }}</strong></p>
    <button type="button" @click="updateCoords">
  </div>
</template>
<script>
export default {
  props: {
    coords: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const updateCoords = () => {
      props.coords = [38.561785, -121.449756]
      // props.coords.value = [38.561785, -121.449756]
    }
    return { updateCoords }
  },
}
</script>

我嘗試使用 updateCoords 方法更新 prop coords 值,但收到錯誤訊息:

未捕獲類型錯誤:無法設定未定義的屬性(設定 '座標')

在我的情況下如何正確更新 props 值?

P粉951914381P粉951914381207 天前446

全部回覆(1)我來回復

  • P粉306523969

    P粉3065239692024-03-26 17:28:10

    道具是只讀的:
    https://v3.vuejs.org/guide/component -props.html#one-way-data-flow

    #如果你想要有兩種方式綁定 props,你需要實作 v-model 模式:
    https://v3-migration.vuejs.org /break-changes/v-model.html#_3-x-syntax

    
    sssccc

    回覆
    0
  • 取消回覆