Vue instance using classes

Question

I'm new to Vue and have a few questions on it. But I think the issue I am running is the one I have no idea how to solve it:

I have a few <div class="foo"> in my code. I want to interact with these <div>s using a Vue instance. I had the idea to use something like:

var app = new Vue({
  el: 'div.foo',
  data: {
    message: 'bar'
  }
})

Therefore, all the div.foo elements would be manageable by app. But how can I get EXACTLY the element I'm working with?

Let's say in JQuery we have this...

$("div.foo").click(function() {
    console.log($(this));
})

The code will work for every div.foo, but the print will show just the clicked element.

I don't think this approach is not something you want to do, and it's not something that's recommended.Why simply not assign id to div and mount vue instance to that div, and inside instance you can create different components which would have their own state ? Pro tip: try to simply forgot everything about jQuery when you are working with VueJS ;) — Belmin Bedak
– Belmin Bedak, Commented Mar 22, 2017 at 21:05
Because I would have like 6 or 7 vue instances doing the same thing. What do you recommend for something like this? — porthunt
– porthunt, Commented Mar 22, 2017 at 21:06
It's hard to say because I don't know what you are exactly building, but I'd go with one main instance and component/s that represtent div.foo state. — Belmin Bedak
– Belmin Bedak, Commented Mar 22, 2017 at 21:15

Bert · Accepted Answer · 2017-03-22 21:19:40Z

26

You can't do what you are suggesting, but you could create a new Vue for each element matching your selector.

Each would hold it's own state.

const vues = document.querySelectorAll(".app");
Array.prototype.forEach.call(vues, (el, index) => new Vue({el, data:{message: "hello " + index}}))

Example.

If you wanted a shared state,

const vues = document.querySelectorAll(".app");
const each = Array.prototype.forEach;
const data = {
  message: "hello world"
};
each.call(vues, (el, index) => new Vue({el, data}))

At which point you could do something like data.message = "new value" and all the Vues would change.

Example 2.

This is just me playing around though. It might be advisable for you to just create one Vue and manage all your foos.

edited Mar 22, 2017 at 21:19

answered Mar 22, 2017 at 21:11

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 02:01:05Z

1

Additionally, if you want to access the html from your js/ts files, you can use vue's ref system.

example:

<template> 
<div ref="example">example</div>
</template>

example.js:

var myExampleDiv = this.$refs.example;

or if your using typescript

example.ts:

const myExampleDiv = this.$refs.example as HTMLElement;

For more information on this: https://v2.vuejs.org/v2/api/#vm-refs

edited Jul 15, 2022 at 2:01

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 9, 2018 at 14:33

DanPottsHimself

1366 bronze badges

Collectives™ on Stack Overflow

Vue instance using classes

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related