Блог

Я работаю в 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);

        })
    }

})
 

Это не типичный способ работы с 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 .