Using vue bootsrap in uibuilder

General
1

I'm trying to use vue bootstrap table in uibuilder index.html file but when I run uibuilder its show my site blank I used below code :

			<script>
			  export default {
				data() {
				  return {
					items: [
					  { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
					  { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
					  { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
					  { age: 38, first_name: 'Jami', last_name: 'Carney' }
					]
				  }
				}
			  }
			</script>
    </b-container>
</div>

ab1
ab11758×508 14.8 KB

2

ab2
ab21042×810 105 KB

3

You haven't followed the approach used by the templates that come with uibuilder. Please start with those so that you can see the code structure you need to use.

Also, whenever you are using a front-end framework of any kind and you get a white screen, it means that the framework has crashed. Open your browser dev tools and go to the console tab to see the errors.

In this case, you have embedded some javascript inside the HMTL and you've used the export feature only available to certain versions of javascript AND you haven't then imported that. Even then, your code wouldn't work because VueJS would not know what to do with it.

I you look in the provided template index.js file, you will see all of the code structures needed.

4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.