I was trying to make a radio button using VueJS and Bootstrap Vue, but this happens when I make it. I'm expecting this to be syntax error just like what it said, but I can't seem find any clue.
So I tried to copy pasted the code, here's the full code of test_radio.php
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="//unpkg/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
</head>
<body>
<template>
<div>
<b-form-group label="Radios using <code>options</code>">
<b-form-radio-group id="radios1" v-model="selected" :options="options" name="radioOpenions">
</b-form-radio-group>
</b-form-group>
<b-form-group label="Radios using sub-ponents">
<b-form-radio-group id="radios2" v-model="selected" name="radioSubComponent">
<b-form-radio value="first">Toggle this custom radio</b-form-radio>
<b-form-radio value="second">Or toggle this other custom radio</b-form-radio>
<b-form-radio value="third" disabled>This one is Disabled</b-form-radio>
<b-form-radio :value="{fourth: 4}">This is the 4th radio</b-form-radio>
</b-form-radio-group>
</b-form-group>
<div class="mt-3">
Selected: <strong>{{ selected }}</strong>
</div>
</div>
</template>
<!-- Vue.js @2.5.1 -->
<script type="text/javascript" src="js/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<!-- The error is below -->
<script>
export default {
data () {
return {
selected: 'first',
options: [
{ text: 'Toggle this custom radio', value: 'first' },
{ text: 'Or toggle this other custom radio', value: 'second' },
{ text: 'This one is Disabled', value: 'third', disabled: true },
{ text: 'This is the 4th radio', value: {fourth: 4} }
]
}
}
}
</script>
</body>
</html>
Uncaught SyntaxError: Unexpected token export
I'm pretty sure there's a mistake on the code on Export, but I already checked many times and I can't seem to find the error in the syntax.
I'm still new to Javascript, Vue.JS, and Bootstrap Vue, so any help would be useful, thanks! Anyway this code es from Bootstrap Vue's documentation.
I was trying to make a radio button using VueJS and Bootstrap Vue, but this happens when I make it. I'm expecting this to be syntax error just like what it said, but I can't seem find any clue.
So I tried to copy pasted the code, here's the full code of test_radio.php
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="//unpkg./bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg./bootstrap-vue@latest/dist/bootstrap-vue.css"/>
</head>
<body>
<template>
<div>
<b-form-group label="Radios using <code>options</code>">
<b-form-radio-group id="radios1" v-model="selected" :options="options" name="radioOpenions">
</b-form-radio-group>
</b-form-group>
<b-form-group label="Radios using sub-ponents">
<b-form-radio-group id="radios2" v-model="selected" name="radioSubComponent">
<b-form-radio value="first">Toggle this custom radio</b-form-radio>
<b-form-radio value="second">Or toggle this other custom radio</b-form-radio>
<b-form-radio value="third" disabled>This one is Disabled</b-form-radio>
<b-form-radio :value="{fourth: 4}">This is the 4th radio</b-form-radio>
</b-form-radio-group>
</b-form-group>
<div class="mt-3">
Selected: <strong>{{ selected }}</strong>
</div>
</div>
</template>
<!-- Vue.js @2.5.1 -->
<script type="text/javascript" src="js/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg./babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg./bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<!-- The error is below -->
<script>
export default {
data () {
return {
selected: 'first',
options: [
{ text: 'Toggle this custom radio', value: 'first' },
{ text: 'Or toggle this other custom radio', value: 'second' },
{ text: 'This one is Disabled', value: 'third', disabled: true },
{ text: 'This is the 4th radio', value: {fourth: 4} }
]
}
}
}
</script>
</body>
</html>
Uncaught SyntaxError: Unexpected token export
I'm pretty sure there's a mistake on the code on Export, but I already checked many times and I can't seem to find the error in the syntax.
I'm still new to Javascript, Vue.JS, and Bootstrap Vue, so any help would be useful, thanks! Anyway this code es from Bootstrap Vue's documentation.
Share Improve this question edited Oct 9, 2018 at 7:35 Irfandy J. asked Oct 9, 2018 at 7:28 Irfandy J.Irfandy J. 1,4641 gold badge22 silver badges38 bronze badges 10-
2
importandexportdon't have browser support yet, you can only use them with a preprocessor like webpack (see here). The bootstrap documentation is creating a Vue ponent, that code isn't meant to be used right insideindex.html. – user5734311 Commented Oct 9, 2018 at 7:35 - Ahh.. so I have to use Webpack..? Are there any alternate to this? I tried figuring out how to use Webpack from their documentation, but it's confusing.. Any reference to Webpack for newbies would be nice if there's no alternate.. – Irfandy J. Commented Oct 9, 2018 at 7:41
- 1 It's a whole can of worms. Start here: cli.vuejs/guide – user5734311 Commented Oct 9, 2018 at 7:43
- Hm... thanks.. I try to read Vue CLI, I tried to avoid it at first because it seems to be avoidable using the CDN, but I guess not. I'll try to understand it then. Thanks. – Irfandy J. Commented Oct 9, 2018 at 8:00
- Oh and you might want to make your ment an answer, cause I'm going to open another new question if I needed to. Thanks again! – Irfandy J. Commented Oct 9, 2018 at 8:01
1 Answer
Reset to default 6If you are going to use the CDN approach, VueJS starts out like
<!-- Begin of area that is impacted by VueJS -->
<div id="app">
<b-form-group label="Radios using <code>options</code>">
<b-form-radio-group id="radios1" v-model="selected" :options="options" name="radioOpenions">
</b-form-radio-group>
</b-form-group>
</div>
<!-- End of area that is impacted by VueJS -->
<script>
var app = new Vue({
el: '#app',
data: {
...
}
})
<script>
The '#app' is what ties the sections together, not import/export