Vue.js: "attach" content to two different classes? - vue.js

Question

So, I have data in my vue.js file that I want to "attach" to two different classes without having to create another Vue.js component or repeating the content again in another component. For example:
var fullViewContent = new Vue({
el: ".class-one",
data: {
name: 'Vue.js'
},
data: {
items: [{
content: "repeat this string in various places",
},
]
}
First HTML Block
<div class="class-one">
<template v-for="(item, index) in items">
<div class="container">
<h2>{{ item.content }}</h2>
</div>
</template>
</div><!-- end list view -->
Second HTML Block
<div class="different-html-block class-one">
<template v-for="(item, index) in items">
<div class="container">
<h2>{{ item.content }}</h2>
</div>
</template>
</div><!-- end list view -->
So I want the same content from my component in each of these different html blocks. Is it enough to just attach the same class to it? Something else?

Answer 1

You cannot apply a Vue to more than one element.
Instead, move the shared data into an object accessible to both Vues.
const shared = {
items: [
{
content: "repeat this string in various places",
},
{
content: "more data",
},
]
}
var app1 = new Vue({
el: "#app1",
data: {
name: 'Vue.js',
items: shared.items
},
})
var app2 = new Vue({
el: "#app2",
data: {
name: 'Vue.js',
items: shared.items
}
})
And the template
<div id="app1">
<div class="class-one">
<template v-for="(item, index) in items">
<div class="container">
<h2>{{ item.content }}</h2>
</div>
</template>
</div><!-- end list view -->
</div>
<div id="app2">
<div class="different-html-block class-one">
<template v-for="(item, index) in items">
<div class="container">
<h2>{{ item.content }}</h2>
</div>
</template>
</div><!-- end list view -->
</div>
Example.
If you want to avoid repeating code you can programmatically create your Vues.
each = Array.prototype.forEach;
const data = {
name: "Vue.js",
items: [
{
content: "repeat this string in various places",
},
{
content: "more data",
},
]
}
each.call(document.querySelectorAll(".class-one"), el => new Vue({el, data}))
Example.