Question

我正在使用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);

        })
    }

})

Answer 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在父实例和此组件之间进行通信。

V模型不适用于动态添加的下拉菜单

1 个答案: