There is such a code

const app = new Vue({ router, el: '#app', template: '<p>111111</p>', data: { items: [], }, created: function () { this.fetchData(); }, watch: { // call again the method if the route changes '$route': 'fetchData' }, methods: { fetchData: function () { var requestUrl = this.$router.options.base + this.$router.history.current.fullPath; var self = this; this.$http.get( requestUrl ).then( response => this.$options.template = '<strong>22222</strong>' ); //not working :( // this.$options.template = '<strong>22222</strong>' // working } } });

Those. it turns out when changing the route, an ajax request is sent, and I want to dynamically change the template, but nothing happens, there are no errors, it just displays the initial version

 <p>111111</p>

Actually why and how can this be done?

  • well, probably because you now have to start rendering, and in general it's some kind of clumsy way, use vue-route - Orange_shadow
  • I want to dynamically change the template / data, i.e. the response from the server will be something like this {template: '', data: ''} or simply {'here is the component code (Single File Components)'} I have been studying vuejs for just a couple of days. Tried through Vue.compile (response.data) .render. But so my properties are not available for some reason. - Guest
  • Most likely this will not work, I can not understand why are you trying to change the contents of the template dynamically? You have to change the data in the template, but not the template. In your case, then you need to create as many templates as you need and connect them, and then, upon arrival of certain data, hide some and display others - Orange_shadow
  • My project is divided into modules, each module has its own presentation files / scripts / styles. Suppose there is a module on the server side of the Directory, I need to render a page with a table, I use vuetifyjs.com/components/data-tables as the basis. So I want to give this part of the code from the server. Those. everything will be collected on the client, but the template files themselves (vuejs components) will be given north and physically located in the folder with the module, and compiled on the client using vuejs. Something like this. - Guest

1 answer 1

It seems in your option it is worth using vue-router and lazy loading of paths. When you go to a certain path, the corresponding mini-assembly of the necessary components will be loaded.