使用jQuery append插入Vuetify组件不显示问题求助

你遇到的核心问题是用jQuery直接操作DOM插入Vuetify组件，完全绕过了Vue的响应式系统。Vue在初始化时会编译模板，解析组件、指令（如v-model、@click）并建立数据绑定，但jQuery动态插入的HTML内容不会被Vue重新编译，所以Vuetify组件无法被正确初始化，指令也不会生效，和“重启Vuetify”无关。

正确的做法是用Vue的数据驱动视图思想，通过响应式数组管理卡片列表，让Vue自动渲染DOM。

修改后的实现代码 #

模板部分 #

<div id="app">
  <!-- 原表单（用于添加新卡片） -->
  <v-form ref="form" lazy-validation>
    <!-- 保留你原来的表单输入，比如name、颜色选择器等 -->
    <v-btn color="success" @click="createList">创建卡片</v-btn>
  </v-form>

  <!-- 用v-for渲染卡片列表 -->
  <div id="lists" class="d-flex flex-wrap">
    <v-card 
      v-for="(card, index) in cards" 
      :key="index"
      width="374" 
      class="mx-10 my-12" 
      elevation="5"
    >
      <v-system-bar :color="card.color.hexa" dark>
        <b>{{ card.name }}</b>
      </v-system-bar>
      <v-form lazy-validation>    
        <v-card-actions>
          <v-text-field 
            v-model="card.title" 
            class="mx-5" 
            :rules="jobsTitleRules" 
            label="Title" 
            required
          ></v-text-field>
          <v-btn color="success" @click="addTitle(index)">Add</v-btn>
        </v-card-actions>
        <ul style="padding: 0px;">
          <li v-for="(job, jobIndex) in card.jobs" :key="jobIndex">{{ job }}</li>
        </ul>
      </v-form>
    </v-card>
  </div>
</div>

JavaScript部分 #

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      // 原表单输入数据
      name: '',
      color: { hexa: '#1976d2' },
      jobsTitleRules: [
        v => !!v || '标题不能为空',
        v => v.length <= 20 || '标题不能超过20个字符'
      ],
      // 响应式数组，存储所有卡片的独立数据
      cards: []
    }
  },
  methods: {
    createList() {
      if (this.$refs.form.validate()) {
        // 将新卡片数据推入数组，Vue自动渲染新组件
        this.cards.push({
          name: this.name,
          color: { ...this.color }, // 复制对象避免引用共享
          title: '',
          jobs: [] // 每个卡片独立的任务列表
        })
        // 清空原表单输入
        this.name = ''
      }
    },
    addTitle(index) {
      const targetCard = this.cards[index]
      if (targetCard.title) {
        // 用数据驱动添加任务项
        targetCard.jobs.push(targetCard.title)
        targetCard.title = ''
      }
    }
  }
})

关键说明 #

• 用v-for遍历响应式数组渲染卡片，数组更新时Vue自动处理DOM，所有Vuetify组件和指令都会被正确编译初始化。
• 每个卡片的v-model绑定到自身对象的属性，彻底解决多卡片共享数据的问题。
• 完全抛弃jQuery操作DOM的方式，所有视图更新都通过修改响应式数据实现，这是Vue开发的核心原则。

内容的提问来源于stack exchange，提问作者M1kk4l