How to select the vue js el using CSS attribute selector? - javascript

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

Vue not reactive to nested data() changes?

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>

How to make Vue app in javascript and make it work in html?

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>

vue.js not work as expected

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>

Vue.js use correct component

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>

VueJS Passing data Through render

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.

Categories