未捕获的类型错误：无法在 vue 3 中读取未定义的属性（读取“modelValue”）

Question

我想在后端获取 vue 3 textarea 值，所以我在 Vue 3 组件设置中编写代码，如下所示：

<script lang="ts">
import { 
  computed, 
  defineComponent,
  defineEmits,
  defineProps 
} from "vue";
import type { MessageBase } from "@/model/message/MessageBase";
import { MessageType } from "../../../model/message/MessageType";
import { useStore } from 'vuex'



export default defineComponent({
  setup() {
    const emit = defineEmits(['update:modelValue']);
    
    const title = process.env.APP_NAME;
    const { getters,dispatch } = useStore()
    let username = computed(()=>getters['Trans/getUsername'])

    chrome.runtime.onMessage.addListener(
        async function(request, sender, sendResponse) {
            if (request.msg === "something_completed") {
                let result = request.data.content
                await dispatch(
                  'Trans/setUsername',
                  result
                  )
            }
        }
    );
    const props = defineProps({
      modelValue: {
        type: [String, Number],
        default: ''
      }
    })
    computed({
      get () {
        return props.modelValue
      },

      set (value) {
        return emit('update:modelValue', value)
      }
    })
    const safeTranslate = () => {
      let transMe= MessageType[MessageType.TRANSLATE];
      let word = props.modelValue;
      debugger;
      let message : MessageBase = {
        type: transMe,
        data: {
         word: word,
         from: "en",
         to: "zh"
        }
      };
      chrome.runtime.sendMessage(message,function(response){
        
      });
    }

    return {
      title,
      safeTranslate,
      username
    };
  },
  watch:{
    
  },
  components: {
    
  },
});
</script>

但是当我运行这个应用程序时，显示错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'modelValue')
at Proxy.render (popup.js:17752:43)
at renderComponentRoot (popup.js:8083:44)
at ReactiveEffect.componentUpdateFn [as fn] (popup.js:12177:57)
at ReactiveEffect.run (popup.js:6028:29)
at setupRenderEffect (popup.js:12303:9)
at mountComponent (popup.js:12086:9)
at processComponent (popup.js:12044:17)
at patch (popup.js:11645:21)
at mountChildren (popup.js:11832:13)
at mountElement (popup.js:11741:17)

为什么在运行时显示此错误？ 我应该怎么做才能解决这个问题？ 这是模板。html 定义：

<div>
          <textarea 
          :value="props.modelValue" 
          v-on:input="updateValue($event.target.value)"
          placeholder="please input the translate words"></textarea>
        </div>

Answer 1

你没有在模板中使用props关键字，你需要直接访问它们：

<div>
    <textarea 
        :value="modelValue" 
        v-on:input="updateValue($event.target.value)"
        placeholder="please input the translate words"></textarea>
</div>