V-model 不适用于动态添加的下拉菜单答案

【问题标题】：V-model doesn’t work for dynamically added dropdownV-model 不适用于动态添加的下拉菜单
【发布时间】：2019-04-17 21:15:59
【问题描述】：

我正在使用 wordpress 并使用表单插件。通过那个插件，我做了一个级联的州/城市下拉菜单。 v-model 适用于状态下拉列表，因为它已经存在于页面加载中，但是，由于 city 元素是在状态下拉列表选择之后创建的，因此 v-model 不适用于此。我该怎么做？

var entriesList = new Vue({

    el: "#vfm-search",

    data: {
        entries: [],
        loading: true,
        nameFilter: '',
        partyFilter: '',
        houseFilter: '',
        stateFilter: '',
        constFilter: '',
        isMember: ''
    },

    created: function () {
        this.fetchData();
    },

    watch: {
        nameFilter: "fetchData",
        partyFilter: "fetchData",
        houseFilter: "fetchData",
        stateFilter: "fetchData",
        constFilter: "fetchData",
        isMember: "fetchData"
    },

    methods: {
        fetchData: function () {

            this.getApi();

        },
        getApi: function (page=1) {

            var self = this;
            this.loading = true; //start loading
            axios.get('/wp-json/frm/v2/views/'+vfmapijs.view_id, {
                    headers: {
                        Authorization: 'Basic '+ btoa( vfmapijs.apiKey +':x' )
                    },
                    params: {
                        page: page,
                        pname: self.nameFilter,
                        pstate: self.stateFilter,
                        pparty: self.partyFilter,
                        phouse: self.houseFilter,
                        pconst: self.constFilter,  //<------ this doesn't work on the newly created property
                        is_mem: self.isMember
                    }
                })
                .then((response) => {
                    this.loading = false; //stop loading
                    this.entries = response.data.renderedHtml;
                })
                .catch((error) => {
                    this.loading = false; //stop loading
                    console.error(error)
                })

        }
    },
    mounted: function() {
        this.$el.addEventListener('click', ev => {

            // detect if a pagination link is clicked
            if( !ev.target.matches('.frm_pagination a') ) return;

            ev.preventDefault();

            let page = ev.target.href.match(/rm-page-16=(\d+)/)[1];

            this.getApi(page);

        })
    }

})

【问题讨论】：

请粘贴其余代码。顺便提一句。 self是js中的保留字。
剩下的只是为js文件生成变量的php文件。表单 html 正在由表单插件生成
所以你动态修改已经挂载的Vue实例的模板？

标签： wordpress vue.js vuejs2

【解决方案1】：

这不是使用 Vue 的典型方式，但您可以这样做：

在js中：

// create custom custom component descriptor
this.entries = {
    template: `<div>${response.data.renderedHtml}</div>`,
    data: /*...*/,
    methods: /*...*/,
}

在您的模板中：

<!-- where you display the entries -->
<component v-if="entries" :is="entries"></component>

那么你应该通过事件或自定义v-model在父实例和这个组件之间进行通信。

【讨论】：