Question

我正在尝试处理V型槽模板中的某些数据，但是出现以下错误：未定义getNameFromCategory

怎么了？

    <template v-slot:items="{ row }" >
    <TableView :rows="results"  >
       <td>{{ getNameFromCategory(row.category) }}</td> 
    </TableView>
    </template>
    <script>
    export default {

        components: {
            TableView
        },
            metdods:{
            getNameFromCategory
        },
            props: {
            'results': {
              type: Array,
              required: true
            },

    }
    </script>

，然后在TableVue.vue组件文件中：

    <template>
       <template v-if="numRows > 0">
              <tr
                v-for="(row, idx) in rows"
                :key="idx"
              >
                <slot name="items" :row="row"></slot>
              </tr>
        </template>
    </template>
    <script>
    export default {
      name: 'TableView',
      props:{
        rows: {
          type: Array,
          default() {
            return []
          },
          required: true
        },
      }
    }
    </script>

似乎通过插槽模板传递的代码是在组件中执行的，但我也尝试在其中定义'getNameFromCategory'函数，但此方法无效。

Answer 1

您写的是metdods而不是methods。 getNameFromCategory也是空的，我不知道是否出于示例的目的。无论如何，它应该更像这样：

 <template v-slot:items="{ row }" >
    <TableView :rows="results"  >
       <td>{{ getNameFromCategory(row.category) }}</td> 
    </TableView>
    </template>
    <script>
    export default {

        components: {
            TableView
        },
            methods:{
            getNameFromCategory(category) {
                return category.name;
            }
        },
            props: {
            'results': {
              type: Array,
              required: true
            },

    }
    </script>

v插槽vue.js中的函数调用

1 个答案: