Javascript 为什么这个Vue.js组件会显示一个函数'；s体而不是它'；返回值是多少？

我正在开发一款小型，前端采用Vue 3，后端采用Slim 3（API）

在

App.vue

中，我有：

<template>
  <div id="app">
    <Header 
    title="My todo list" 
    :unsolvedTodos = unsolvedTodos
    />

    <List 
      :todos="todos"
      :dataIsLoaded=dataIsLoaded
      @delete-todo="deleteTodo" 
      @toggle-todo="toggleTodo" />

    <Footer
      :isValidInput=isValidInput
      newTitle = ""
      placeholder= "+ Add new todo"
      validationMsg = "Please add at least 3 characters"
      @add-todo="addTodo"
      />

  </div>
</template>

<script>
 // more code here
 
export default {
  name: 'App',
  components: {
    Header,
    List,
    Footer
  },

  data() {
    return {
      apiUrl: "http://todo.com/api",
      dataIsLoaded: false,
      isValidInput: true,
      todos: [],
      unsolvedTodos: [],
    }
  },

  methods: {
    showTodos: function(){
      axios.get(`${this.apiUrl}/todos`)
      .then((response) => {
        this.todos = response.data;
      })
     .then(this.getUnsolvedTodos)
     .then(this.dataIsLoaded = true);
    },
    
    // more methods
    addTodo: function(newTitle){
     const newToDo = {
        title: newTitle,
        completed: 0
      }
     
      if(newTitle.length > 2){
        this.isValidInput = true;
        axios.post(`${this.apiUrl}/todo/add`, newToDo);
      } else {
        this.isValidInput = false;
      }
    }
  },

 watch: {
    todos() {
      this.showTodos();
    }
 }
</script>

问题 用于添加新todo的输入（文本类型）显示函数体，而不是其返回值：

function String() { [native code] }

---

为什么会这样？什么是快速可靠的修复方法？

问题在于

newTitle

被声明为道具。 数据是一个返回对象的函数

newTitle

是一个对象键，该值（本例中为字符串）将实际放置在文本字段中

data () {
  return {
    newTitle: String,
  }
}

应该是这样的

data () {
  return {
   newTitle: '',
  }
}

实际上，

'

是初始值，

String

作为初始值是

function String（）{[native code]}

<form @submit.prevent="submitTitle()">
  <input type="text" :placeholder="placeholder" v-model="newTitle">
  <span class="error" v-if="!isValidInput">{{validationMsg}}</span>
</form>

methods: {
  submitTitle() {
    this.$emit('add-todo', this.newTitle)
    this.newTitle = ''
  }
}

{{validationMsg}}
方法：{
submittle（）{
this.$emit（'add-todo'，this.newTitle）
this.newTitle=“”
}
}

这是正确的。添加todo后如何清空输入？您可以在提交事件中绑定函数。因此，首先将newTitle设置为空，然后将事件发送到父组件

<form @submit.prevent="submitTitle()">
  <input type="text" :placeholder="placeholder" v-model="newTitle">
  <span class="error" v-if="!isValidInput">{{validationMsg}}</span>
</form>

methods: {
  submitTitle() {
    this.$emit('add-todo', this.newTitle)
    this.newTitle = ''
  }
}