Menu
I'm trying to learn vue.js. I'm adding list of elements, I want to add class="active" only to the first element in the for loop. following is my code:
<div class="carousel-inner text-center " role="listbox"> <div class="item" v-for="sliderContent in sliderContents"> <h1>{{ sliderContent.title }}</h1> <p v-html="sliderContent.paragraph"></p> </div> </div> So the first element should look like something this:
<div class="item active"> <h1>WELCOME TO CANVAS</h1> <p>Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas</p> </div> I'm able to get the data so everything is working perfectly fine.
And following is my script code:
<script> export default{ data() { return { sliderContents: [ { title: "WELCOME TO CANVAS", paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas" }, { title: "WELCOME TO CANVAS", paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas" }, { title: "WELCOME TO CANVAS", paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas" }, { title: "WELCOME TO CANVAS", paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas" } ] } } } Help me out.
741
Adding a dynamic class name is as simple as adding the prop :class="classname" to your component. Whatever classname evaluates to will be the class name that is added to your component.
We can toggle a class dynamically in vue by passing an object to the v-bind:class attribute. In this example, we are toggling a class by clicking the Toggle button.
Refs are Vue. js instance properties that are used to register or indicate a reference to HTML elements or child elements in the template of your application. If a ref attribute is added to an HTML element in your Vue template, you'll then be able to reference that element or even a child element in your Vue instance.
Vue's reactivity system works by deeply converting plain JavaScript objects into reactive proxies. The deep conversion can be unnecessary or sometimes unwanted when integrating with external state management systems (e.g. if an external solution also uses Proxies).
const TextComponent = { template: ` <p>{{ text }}</p> `, props: ['text'], }; new Vue({ components: { TextComponent, }, template: ` <div> <text-component v-for="(item, index) in items" :class="{ 'active': index === 0 }" :text="item.text"> </text-component> </div> `, data: { items: [ { text: 'Foo' }, { text: 'Bar' }, { text: 'Baz' }, ], }, }).$mount('#app');.active { background-color: red; }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title></title> </head> <body> <div id="app"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> </body> </html>Above is a snippet demonstrating a solution to your problem. Here's an outline of it:
Inside
v-forblocks we have full access to parent scope properties.v-foralso supports an optional second argument for the index of the current item.
– https://vuejs.org/v2/guide/list.html#Basic-Usage
The v-for directive has a second argument giving you the index of the item.
v-for="(item, index) in items" Since you want the active class on the first item you can use an expression testing if the index is 0 and bind it to the class attribute.
:class="{ 'active': index === 0 }" If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
