小编Ada*_*dam的帖子

我正在使用Vue,Vuex和Vuetify来显示数据表中的课程,并希望在线编辑作为一项功能.请参阅下面的相关组件代码.

#Courses.vue

<template>
  <v-data-table 
  :headers="headers"
  :items="courses"
  :search="search"
  :loading="loading"
  no-data-text="No Courses Available"
  >

    <template slot="items" slot-scope="props">
      <tr>
        <td>
          <v-edit-dialog
          :return-value.sync="props.item.title"
          lazy
          >
            {{ props.item.title }}
            <v-text-field
            slot="input"
            label="Enter New Course Title"
            v-model="props.item.title"
            single-line
            counter
            @keyup.enter="onUpdateCourse({ id: props.item.id, title: props.item.title})"
            ></v-text-field>
          </v-edit-dialog>
        </td>

        <td>{{ props.item.category }}</td>
        <td>{{ props.item.startDate | date }}</td>
        <td>{{ props.item.endDate | date }}</td>
        <td>{{ props.item.location }}</td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
  export default {
    data() {
      return {
        headers: [** table headings **],
      };
    },
    computed: {
      courses() { …

我对 toRaw() 的反应性感到困惑。

应用程序.vue

<template>\n  <img alt="Vue logo" src="./assets/logo.png" />\n  <TheForm @newThing="addNewThing" />\n  <TheList :allTheThings="allTheThings" />\n</template>\n\n<script setup>\n  import TheForm from "./components/TheForm.vue";\n  import TheList from "./components/TheList.vue";\n\n  import { ref } from "vue";\n\n  const allTheThings = ref([]);\n  const addNewThing = (thing) => allTheThings.value.push(thing);\n</script>\n

TheForm.vue

<template>\n  <h3>Add New Thing</h3>\n  <form @submit.prevent="addNewThing">\n    <input type="text" placeholder="description" v-model="thing.desc" />\n    <input type="number" placeholder="number" v-model="thing.number" />\n    <button type="submit">Add New Thing</button>\n  </form>\n</template>\n\n<script setup>\n  import { reactive, defineEmit, toRaw } from "vue";\n\n  const emit = defineEmit(["newThing"]);\n\n …