I am new to Vue.js and am trying to create a sample component as per the code below but ending up with "[Vue warn]: Error when rendering component <my-tag>: " I have looked at stackoverflow for a similar question asked before but that did not help. The code for component is as below:
Vue.component('my-tag', {
props: ['myTagAttr'],
template: '<span>{{myTagAttr.text}}</span>'
})
var data = {
myTagAttrVal: {
text: 'foobar',
color: 'Red'
}
}
var vm = new Vue({
el: '#demo',
data: data
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
<span id='demo'>
<my-tag v-bind:myTagAttr='myTagAttrVal'></my-tag>
</span>
</body>
</html>
Alternatively, code can be found at JSbin
HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents :
<my-tag v-bind:my-tag='myTagAttrVal'></my-tag>
Here is a working fiddle: https://jsfiddle.net/nxcbm6na/
You can find the details in the documenation
https://v2.vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case
Related
Im new to VueJS and trying to figure out how I would nest components or have sub components. I don't know if im very bad at googling but I couldn't really find a clear answer.
This is my script and html :
Vue.component('card', {
template: '<div class="card"></div>'
})
Vue.component('card-text', {
props: ['text-content'],
template: '{{ text-content }}'
})
new Vue({
el: '#app',
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<div id="app">
<card>
<card-text text-content="Text to show"></card-text>
</card>
</div>
</body>
</html>
as you can see I have 2 components, card and card-text.
I want to display these like this :
<card>
<card-text text-content="text to show"></card-text>
</card>
You would need slots to do that. Just change your card component to:
Vue.component('card', {
template: '<div class="card"><slot></slot></div>'
})
To be able to render different stuff inside <card></card>
You can read more in the docs
If you want to nest card-text inside card, just do as follows:
Vue.component('card', {
template: '<div class="card"><card-text text-content="Text to show"></card-text></div>'
})
https://alligator.io/vuejs/stripe-elements-vue-integration/
On this website, it says we need to import the file with the script tag in the index.html file, which I did, but I noticed I get a js error.
It's only when I imported directly the script inside the component that the error "'Stripe' is not defined" disappeared.
<template>
<div>
</div>
</template>
<script src="https://js.stripe.com/v3/"></script>
<script>
export default {
name: 'component',
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
I don't want to import it directly inside my component, because it's not clean, what can I do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://js.stripe.com/v3/"></script>
<title>vue-app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Late to the party, but here is a solution that works for me
Your index.html file looks fine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://js.stripe.com/v3/"></script>
<title>vue-app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Then in the component where you want to use it, you can access stripe with the window object, and set the publishable key. This can be done locally in a method, or globally for the component, like this:
<script>
const stripe = window.Stripe(process.env.VUE_APP_STRIPE_PK)
export default {
data() {
return {
// ...
}
},
methods: {
async confirmPayment() {
const paymentResult = await stripe.confirmCardPayment(this.clientSecret, {
receipt_email: 'email#example.com',
})
console.log('paymentResult:', paymentResult)
},
},
}
</script>
I think you should move the script tag of Stripe before the rest of your JavaScript code. The code is probably trying to access the Stripe object before it's been loaded.
I'm struggling with Vue refs. If I define them in my main Vue instance's template, they work fine, but if I define them within a component template, they don't. What am I doing wrong?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>
main.js, version 1
const app = new Vue({
el: '#app',
template: `
<div ref="divRef">
<button ref="buttonRef">Submit</button>
</div>
`
});
result (matches expectation)
> app.$refs
> {buttonRef: button, divRef: div}
main.js, version 2
Vue.component('demo-page', {
template: `
<div ref="divRef">
<button ref="buttonRef">Submit</button>
</div>
`
});
const app = new Vue({
el: '#app',
template: '<demo-page ref="componentRef"></demo-page>'
});
expected result
> app.$refs
> {componentRef: VueComponent, buttonRef: button, divRef: div}
actual result
> app.$refs
> {componentRef: VueComponent}
$refs are scoped within a component. That's the reason, you can only see the componentRef in the $refs of the app itself. The other $refs are accessible within the scope of each component. So, try to access the $refs within the scope of that component.
If you are defining a ref on an element also having the attribute v-for on it, this.$refs.refName will return you an array of DOM elements. Keep in mind that $refs are not reactive unlike data properties.
See also the documentation to $refs with child component instances and the documentation to the ref="" attribute.
I always build my SPA apps with the vue-cli.
This time I'm building a small project and I'm incluing Vue with a script tag.
But I don't understand the following behavior.
// app.js
Vue.component('todo-item', {
template: `<div>Todo Component!</div>`
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue App!'
}
})
The HTML index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
<div id="app">
{{ message }}
<div>
Just some content...
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/app.js"></script>
</body>
</html>
The result is this:
Now, I'll try to add '<todo-item />' Component inside the HTML:
<div id="app">
{{ message }}
<todo-item />
<div>
Just some content...
</div>
</div>
The text 'Just some content...' disappeared:
What Am I doing wrong?
TL;DR;
instead of <todo-item/> use <todo-item></todo-item>
Un-compiled vue.js does not support self-closing html tags.
see style guide:
Unfortunately, HTML doesn’t allow custom elements to be self-closing -
only official “void” elements. That’s why the strategy is only
possible when Vue’s template compiler can reach the template before
the DOM, then serve the DOM spec-compliant HTML.
https://v2.vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended
and issues in github:
https://github.com/vuejs/vue/issues/1036
https://github.com/vuejs/vue/issues/8664
This question already has answers here:
Why don't self-closing script elements work?
(12 answers)
Closed 5 years ago.
Here is my code and i seem to have done everything correctly.
what might be the problem as the output is only {{message}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script src="https://vuejs.org/js/vue.js"/>
<script>
new Vue({
el: '#app',
data:{
message: "Yow"
},
mounted: function () {
console.log("Mounted")
}
});
</script>
</body>
</html>
and it just outputs {{message}}
Hey man you forgot to close ending script tag in vue.js script/api
You were rendering whole html part in script tag like you can see in console below :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script src="https://vuejs.org/js/vue.js"/>
</script>
<script>
console.log('hi');
var app = new Vue({
el: '#app',
data:{
message: 'yow'
},
mounted: function () {
console.log("Mounted")
}
});
</script>
</body>
And always inlude api/main/cdn link ahead of any operational js file