CODEWITHSUNDEEP
vue.jsphalconvolt
heliogabal
heliogabal

Reputation: 613

Target and manipulate single DOM element in vue

Somehow I still can't wrap my head around some core vue concepts.

I have made some simple webpage using phalcon. Created it so, that it would work without JS and now is the time to add some bells and whistles - ajax queries and the like, for the user experience to be better.

I wanted to do everything using vue, to see how it all adds up. But after hours of googling I still can't find solution for the simplest of tasks.

Say: I want to get a text paragraph in a series of <li>-s and change it somewhat. Maybe make excerpt of it and add 'see more' button behind it. Now, in jQuery I would just iterate with each() and perform the tasks. With vue targeting set of DOM elements is much harder for me, probably because of whole paradigm being "the other way round".

I know I could iterate with v-for, but these elements are already in the DOM, taken from the database and templated with volt. I had even this wild idea of creating .js files from phalcon, but it would completely negate my strategy of making functional webpage first and then enhance it progressively.

Frankly speaking I feel like I'm overcomplicating for the sake of it, right now. Is vue even fit for a project like this, or is it exclusively a tool to build app from the ground up?

Upvotes: 1

Views: 1564

Answers (2)

Brian Lee
Brian Lee

Reputation: 18197

Vue provides the ref attribute for registering a reference to a dom element or child component:

// accessible via this.$refs.foo
<li ref="foo">...</li>

Do note, however, that refs are not reactive, as stated in the docs:

$refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.

Upvotes: 1

Philip Feldmann
Philip Feldmann

Reputation: 8435

Vue's templating is client-side, which means if you are delivering an already templated html page (by your backend) there is little vue can still do for you. Vue needs data, not DOM elements to build its viewmodels.

This becomes pretty obvious when building a single page application for example, which would be rendered only on the client-side. You'd simply load the data asynchronously from a backend api (REST for example) and then do all the rendering on the client.

As far as I understand your usecase you want to mix client and server side rendering, rendering most of the non-interactable content using your backend's templating engine and adding some interactivity using vue. In this case you'll need to add some vue components (with their own rendering logic) to your backend template and pass data to that component using vue's data-binding.

Here's an example:

...
<div id="app">
    <my-vue-list :products="{% products %}"></my-vue-list>
</div>
...

And in your JS:

var app = new Vue({
  el: '#app',
  data: {
    components: {MyVueList} // You will have to register all the components you want to use here
  }
})

Upvotes: 1

Related Questions