当我使用jQuery附加时没有显示

Question

我在使用附加于vuetify的jquery时遇到了困难。我不能在我的javascript中写任何vuetify代码。它不会给我看什么认证代码，但它应该能用。我认为这与当您想要插入一个新的vuetify代码时必须重新启动vuetify有关。

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    methods: {
        createList() {
            if (this.$refs.form.validate()) {
                $('#lists').append(`
                <v-card width="374" class="mx-10 my-12" elevation="5">
                    <v-system-bar color="${this.color.hexa}" dark><b>${this.name}</b></v-system-bar>
                        <v-form ref="form" lazy-validation>    
                            <v-card-actions>
                                <v-text-field v-model="name" ref="name" class="mx-5" :rules="jobsTitleRules" label="Title" required></v-text-field>
                                <v-btn color="success" @click="addTitle">Add</v-btn>
                            </v-card-actions>
                            <ul style="padding: 0px;" id="jobs"></ul>
                        </v-form>
                </v-card>`);
            }
        },
    },
})

到处找，真的找不到解决办法。有人能帮忙吗？

Answer 1

正如我在注释中提到的，jQuery 追加函数旨在添加本机 HTML、本机JS或jQuery对象。

它不可能与Vue/Vuetify一起使用，因为您试图显示虚拟模板组件，这些组件是，而不是本机。

在您的例子中，您可以使用Vue动态分量列表。

首先，您需要创建动态组件(我稍微简化了模板)：

const externalForm = Vue.component('external-form', {
  props: {
    name: String,
    color: String,
  },
  data() { 
    return {  
      internalName: this.name,
    } 
  },
  methods: {
    addTitle() {
      this.$emit("emit-title", this.internalName)
    }
  },
  template: `
  <v-card width="374" class="mx-10 my-12" elevation="5">
    <v-system-bar :color="color" dark><b>{{name}}</b></v-system-bar> 
    <v-card-actions>
      <v-text-field v-model="internalName" class="mx-5" label="Title"></v-text-field>
      <v-btn color="success" @click="addTitle">Add</v-btn>
    </v-card-actions>
  </v-card>`,
});

当您需要将一些数据传递给组件时，您应该使用props。对于内部数据，可以使用 data 部分。如果您需要返回一些数据，您可以发出某些事件。

现在让我们看看如何在您的主模板中使用它。假设您已经有了一些<v-list-item>组件的列表。您需要将一些项目添加到列表的尾部。通过这种方式，例如：

<v-btn @click="addItem" color="primary">Click here to add item</v-btn>
...
<v-list-item v-for="(item, key) in items" :key="key">
  <component :is="item.component" v-bind="{...item.props}" @emit-title="pushToList"/>
</v-list-item>

最后，您需要定义您的主要组件：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      items: [],
      titles: []
    }
  },
  methods: {
    pushToList(val) {
      this.titles.push(val)
    },
    addItem() {
      this.items.push({ component: 'external-form', props: { 
        name: 'Some name', 
        color: '#' + Math.floor(Math.random() * 16777215).toString(16) //Just a random color HEX
      }})
    }
  }
})

我希望现在您可以将此方法应用到您的业务逻辑中。

这里有CodePen游乐场。