I have this HTML:
<div data-identifier='app'>
...
</div>
And I have this Vue js code:
var app = new Vue({
el: '[data-identifier]',
data: {
},
methods: {
}
});
But it seems that Vue does not understand [data-identifier] CSS selector.
How can I use attribute CSS selector with Vue js?
It should work as shown below:
var app = new Vue({
el: '[data-identifier]',
data: {
msg:"hello"
},
methods: {
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div data-identifier='app'>
{{msg}}
</div>
Related
My Vue 2 fails to react when an entry is added to an object returned by data(). I can make it work other way but would like to know the underlying reason. See also JSfiddle
var app = new Vue ({
el: "#app",
data() {
return {
addedRows: {
'section1': {}
}
}
},
methods: {
addToList(chapter) {
this.addedRows.section1[chapter] =
this.addedRows.section1[chapter] || []
this.addedRows.section1[chapter].push({'T': 'XXX'})
console.log(this.addedRows)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<span #click="addToList('chapter1')">{{ addedRows }}</span>
</div>
Hi I'm trying to make my Vue app in javascript so it isn't in html. Is there any way how to make it work? I tried this:
In HTML:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="assets/actions.js" type="text/javascript"></script>
in javascript:
const AppNotes = Vue.createApp({
data: {
newFormtext: "",
contents: [
{title: "First Title", contents: ["content1", "content2", "content3"]}
]
},
methods: {
addNewFormEvent() {
this.titles.push(this.formtext)
}
}
})
AppNotes.mount('#content')
but it don't work in my html and text is still like {{ content.title }}
Here is a basic template of vuejs 2 using html and javascript, without node.
You must call Vue constructor and set the el value to some tag id.
new Vue({
el: "#notes-app",
data: {
counter: 0
},
methods: {
increment() {
this.counter++;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="notes-app">
{{ counter }}
<button v-on:click="increment">increment</button>
</div>
I'm trying to use vue.js in the following example, but the result in browser is "product" instead of "Boots".
<div id="app">
<h2>{{product}}</h2>
</div>
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js">
const app = new vue({
el: "#app",
data: {
product: "Boots"
}
})
</script>
Change vue to Vue, then works.
app = new Vue({ //not vue, it is Vue
el: "#app",
data: {
product: "Boots"
}
})
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<h2>{{product}}</h2>
</div>
I've got a main-component in that main-component I've a sub-component with vue.js 2.0.
The problem is that the sub-component uses the methods in the main-component.
I've made an example:
Vue.component('main-component', {
template: '<p>This is the main component. <sub-component><button #click="test()">If this button is presses: "sub-component" must show up. </button></sub-component></p>',
methods: {
test() {
alert('main-component');
}
}
})
Vue.component('sub-component', {
template: '<p>This is sub-component <slot></slot> </p>',
methods: {
test() {
alert('sub-component');
}
}
})
var app = new Vue({
el: '#app'
})
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
<main-component></main-component>
</div>
How do I make sure the sub-component uses it's own methods, and in this case give an alert of: 'sub-component' instead of 'main-component' when the button is being pressed?
Use a scoped slot.
Vue.component('main-component', {
template: `
<p>This is the main component.
<sub-component>
<template scope="{test}">
<button #click="test()">If this button is presses: "sub-component" must show up. </button>
</template>
</sub-component>
</p>`,
methods: {
test() {
alert('main-component');
}
}
})
Vue.component('sub-component', {
template: '<p>This is sub-component <slot :test="test"></slot> </p>',
methods: {
test() {
alert('sub-component');
}
}
})
var app = new Vue({
el: '#app'
})
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
<main-component></main-component>
</div>
Perhaps you can try something like this:
<sub-component ref="sub"><button #click="$refs.sub.test()">...</button></sub-component>
I'm currently working with VueJS 2, I would like to pass some params from the HTML to the VueJS component. Let me show you.
My Html Div looks like this :
<div id="app" :id="1"></div>
And my javascript :
new Vue({
store, // inject store to all children
el: '#app',
render: h => h(App)
});
My App Component:
<template>
<div>
{{ id }}
</div>
</template>
<script>
export default {
props: {
id: Number
}
}
</script>
I would like to get the id passed in the Html, in my App component.
How should I do ?
Here is one way.
<div id="app" data-initial-value="125"></div>
new Vue({
el: '#app',
render: h => h(App, {
props:{
id: document.querySelector("#app").dataset.initialValue
}
})
})
But you don't have to use a render function.
new Vue({
el: '#app',
template:"<app :id='id'></app>",
data:{
id: document.querySelector("#app").dataset.initialValue
},
components:{
App
}
})
Also, I'm using querySelector assuming you rendered initialValue (instead of id) to the page as an attribute, but you could just as easily put it somewhere else on the page like a hidden input or something. Really doesn't matter.