小编dru*_*hin的帖子

我按照自定义指令的指南在 Vue.js 3 中创建自定义指令。我创建了一个指令来更改元素的背景。

Home.vue包括自定义指令的使用以及main.js自定义指令的定义。

“首页.vue”

<template>
    <p v-highlight="yellow">Home</p>
</template>

“main.js”

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

app.mount('#app');
app.directive("highlight",{
    beforeMount(el, binding){
        el.style.background = binding.value
    }
});

但我在控制台中收到以下错误：

“无法读取未定义的‘创建’属性”

有人帮助我吗？

我想在示例照片中制作该表。

我想使用 rowspan 和制作的代码与行连接。但它不起作用，浏览器显示发生错误。首先，我的样本数据如下。

    export const dummyCssTest = [
    {
        id:"1",
        name:"a",
        sub:[
            {id:"1#1",name:"b"},
            {id:"1#2",name:"c"},
        ]
    },
    {
        id:"2",
        name:"d",
        sub:[
            {id:"2#1",name:"e"},
            {id:"2#2",name:"f"},
            {id:"2#3",name:"g"},
        ]
    }
]

如果 sub 的 id 包含与 main 的 id 相同的数字，例如“1”、“2”，在这种情况下，名称的行将与 sub 的数组长度的数字连接。所以我在下面编写了代码。我的代码是由 TypeScript 编写的，框架是 Nuxt.js 和 Vuetify.js。你能给我建议吗？

    <template>
  <div>
      <v-simple-table dense>
          <thead>
              <tr>
                <th class="blue lighten-5">name</th>
                <th class="blue lighten-5">sub_name</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="item in items" :key="item.id">
                  <td :rowspan="[sub.length]">{{item.name}}</td>
                  <td>{{item.sub[sub.length].name}}</td>
              </tr>
          </tbody>
      </v-simple-table>
  </div>
</template>
<script lang="ts">
import { Component, Vue} from 'nuxt-property-decorator'
import …