Vue2.x vue custom element when i passed param like 111. the dot at the end was removed. Is it well known issue? How to fix it.
Step
- npm run build vue file
- use file from /dist in php project
Problem in index.php Hello from MyComponent! -> 111
Expected result Hello from MyComponent! -> 111.
Dot at the end was cut off
index.Php file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<my-component test-value="111."></my-component>
<script src="vue-old/dist/main.js"></script>
</body>
</html>
MyComponent.vue
<template>
<div class="my-component">
<h1>Hello from MyComponent! -> {{ testValue }}</h1>
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
testValue: {
type: String,
default: 'default message'
}
}
}
</script>
<style scoped>
.my-component {
color: blue;
}
</style>
main.js to build element
import Vue from 'vue'
import VueCustomElement from 'vue-custom-element'
import MyComponent from './src/MyComponent.vue'
Vue.use(VueCustomElement)
Vue.customElement('my-component', MyComponent)
Vue.component('v-style', {
render: function (createElement) {
return createElement('style', this.$slots.default)
}
})
.cannot be a number of any sort, hence keep it as Number. It is feasible if you have for example "111.25" but not without nothing else behind the dot. "Upgrading Vue to a newer version is certainly an option", you are quite late to this one, I recommend migration ASAP to avoid yourself an even harder time later on.