Develop Reference

In Vue 2 how to have only 1st input type checkbox checked in v-for loop

Thanks for having look I'm kinda stuck.Trying to figure out how to have first checkbox rendered checked by default.
Here is my JS the categories are coming in dynamically
Vue.component('category-filter', {
template: '#category-filter-template',
props: {
appMounted: false,
},
data() {
return {
categories: {},
checkedState: false,
};
},
methods: {
handleCheckboxClicked(e) {
console.log({ e });
},
},
mounted() {
this.appMounted = true;
this.categories =jsContext.categories
},
});
Here is my template I have choose to make styles inline to make component more reusable
<div
class="filter-container--wrapper"
style="
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 2rem;
color: #fff;
background-color: #5676a7;
border-radius: 5px;
"
>
<div
id="filter-item"
style="padding: 15px"
v-for="category in categories"
:key="category.id"
>
<input
id="category-name"
type="checkbox"
#click="handleCheckboxClicked($event)"
:value="category.id"
:checked="checkedState"
/>
<label for="category-name">
<span>\{{category.name}}</span>
</label>
</div>
</div>

You can initialy define the value as checked by setting it when you setup the data for the model:
this.categories = Array.from(jsContext.categories || []).map((v,i) => (v.checked = !i, v));
Various issues:
You should use a model instead of :value, then change the model to checked.
Don't mutate props!
If categories is an array then set it as array in data, not object.
Is better to use computed props for the inline style, or if possible always put it in your CSS file or in <style>, you can scope it #category-filter-template .filter-container--wrapper {} if you don't want it conflicting.
<template id="category-filter-template">
<div class="filter-container--wrapper" :style="wrapperStyle">
<div
id="filter-item"
:style="itemStyle"
v-for="category in categories"
:key="category.id"
>
<input
id="category-name"
type="checkbox"
v-model="category.checked"
:checked="category.checked"
/>
<label for="category-name">
<span>\{{category.name}}</span>
</label>
</div>
</div>
</template>
Then your component:
Vue.component('category-filter', {
template: '#category-filter-template',
data() {
return {
categories: []
};
},
computed: {
wrapperStyle () {
return {
'display': 'flex',
'flex-wrap': 'wrap',
'-webkit-box-pack': 'center',
'-ms-flex-pack': 'center',
'justify-content': 'center',
'margin-bottom': ' 2rem',
'color': '#fff',
'background-color': ' #5676a7',
'border-radius': ' 5px'
}
},
itemStyle () {
return {
'padding': '15px'
}
}
},
mounted() {
this.categories = Array.from(jsContext.categories || []).map((v,i) => (v.checked = !i, v))
},
})
See working online: https://playcode.io/847454/

You should set the source of truth in your model, not in your rendering.
You should have something like
mounted() {
this.categories[0].id=true;
}
however, it's not clear what the structure of categories is. Is it an array? If so, you should initialized it as an empty array instead of an object. Also, if you should probably be using v-model instead of :value so that changes in checked status are saved in the model. Finally, I'm not sure if you want the model to be linked to the id attribute. Probably there is another attribute that you want to bind.

how to open add modal based on click event from Parent component- vuejs

There is a product page where product list component and action buttons are there. This is the parent component. That product list component consists of list table and edit/add modal. Now, problem is Add action event is in parent component. But, add modal related data is available in child component.
So, how can i open that model based on click event from parent? Here i am doing like this approach.
Parent Component(Product Component snippets )
<template>
..... other code ....
<div class="action-buttons">
<vu-button class="add-action" #click="onAddAction">
<svg-icon
fill="#0071E3"
name="add"
height="20"
width="28"
/>
</vu-button>
</div>
<ChildComponent :open-add-modal="isAddModal" />
</template>
Methods in Parent component
onAddAction() {
this.editable = false;
this.isAddModal = true;
},
Now, in child component i passing boolean props openAddModal but i am checking condition into created hook to show Add modal.
Problem is in initial rendering or page load add modal is showing up not in click event. How can i solve this issue?
Child component(Created hook)
created() {
if(this.openAddModal) {
this.showModal = true;
this.formType = 'add';
this.editId = null;
}
},
I want to show add modal based on click event from parent not in initial page load.

You can try using a watcher instead of checking the value of open-add-modal in the created hook. This way, when the prop open-add-modal in the child component changes, you can check the new value there and emit the needed data to the parent to then open the modal.
Example:
Parent component code
<template>
<div>
<p>Parent component</p>
<button #click="changeOpenAddModal">Clic to get child data</button>
<button #click="resetParent">Reset data in parent</button>
<p>Data from child: {{ childData }}</p>
<br />
<br />
<Child
:openAddModal="this.openAddModal"
#child-component-data-emit="this.setChildData"
/>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Parent",
components: { Child },
data() {
return {
childData: null,
openAddModal: false,
};
},
methods: {
changeOpenAddModal() {
this.openAddModal = !this.openAddModal;
console.log(
"changing openAddModal data. New value is ",
this.openAddModal
);
},
setChildData(data) {
console.log("setting child data", data);
this.childData = data;
},
resetParent() {
this.childData = null;
this.changeOpenAddModal();
},
},
};
</script>
Child component code
<template>
<div>
<p>Child component</p>
</div>
</template>
<script>
export default {
name: "Child",
props: {
openAddModal: {
type: Boolean,
default: false,
},
},
data() {
return {
childData: {
prop1: "lorem",
prop2: "ipsum",
prop3: "dolor",
},
};
},
watch: {
openAddModal: function (newValue, oldValue) {
console.log("child watcher with newValue", newValue);
if (newValue) {
this.$emit("child-component-data-emit", this.childData);
}
},
},
mounted: function () {
console.log("prop openAddModal value on mounted:", this.openAddModal);
},
};
</script>

I have built a few modals with Vue 2 and Vue CLI, and use an alternate approach for showing, hiding, and determined if add or edit mode. No watch or separate add/edit mode boolean is necessary.
The 'product' processing is somewhat contrived since no database or AJAX are used in this example, but you should get be able to evaluate the functionality.
Parent.vue
<template>
<div class="parent">
<h4>Parent of Form Modal</h4>
<div class="row">
<div class="col-md-6">
<button class="btn btn-secondary" #click="showAddModal">Show Add Modal</button>
<button class="btn btn-secondary btn-edit" #click="showEditModal">Show Edit Modal</button>
</div>
</div>
<form-modal v-if="displayModal"
:parentProduct="product"
#save-product-event="saveProduct"
#close-modal-event="hideModal"
/>
</div>
</template>
<script>
import FormModal from './FormModal.vue'
export default {
components: {
FormModal
},
data() {
return {
product: {
id: 0,
name: '',
description: ''
},
displayModal: false
}
},
methods: {
showAddModal() {
this.resetProduct();
this.displayModal = true;
},
showEditModal() {
this.product.id = 1;
this.product.name = 'productEdit';
this.product.description = 'productEditDescription';
this.displayModal = true;
},
hideModal() {
this.displayModal = false;
},
saveProduct(modalProduct) {
this.product = modalProduct;
this.hideModal();
console.log(this.product);
},
resetProduct() {
this.product.id = 0;
this.product.name = '';
this.product.description = '';
}
}
}
</script>
<style scoped>
.btn-edit {
margin-left: 0.5rem;
}
</style>
FormModal.vue
<template>
<!-- The Modal -->
<div id="form-modal" class="modal-dialog-container">
<div class="modal-dialog-content">
<div class="modal-dialog-header">
<h4>{{ modalTitle }}</h4>
</div>
<div class="modal-dialog-body">
<form #submit.prevent="saveProduct">
<div class="form-group">
<label for="product-name">Name</label>
<input type="text" class="form-control" id="product-name" v-model="product.name">
</div>
<div class="form-group">
<label for="product-description">Description</label>
<input type="text" class="form-control" id="product-description" v-model="product.description">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-secondary btn-close" #click="closeModal">Cancel</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
parentProduct: {
type: Object,
required: true
}
},
data() {
return {
product: this.parentProduct
}
},
computed: {
modalTitle() {
return this.product.id === 0 ? 'Add Product' : 'Edit Product';
}
},
methods: {
closeModal() {
this.$emit('close-modal-event');
},
saveProduct() {
// Add product
if (this.product.id === 0) {
this.product.id = 2;
}
this.$emit('save-product-event', this.product);
}
}
}
</script>
<style scoped>
.modal-dialog-container {
/* display: none; Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-dialog-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 0.3rem;
width: 30%;
}
.btn-close {
margin-left: 0.5rem;
}
</style>

How to conditionally append an element in a scoped Vue Component?

I am trying to create a Component for titles that can be edited when they get double clicked.
The Component takes the h-tag that should be used and the title as props and should produce a normal h-tag, that turns into an input field once double clicked.
This already works if there is only one title on the page, however once there are multiple Components used on one page, it breaks as the Component is not scoped properly. But I can't figure out how.
Here is the code:
<template>
<div class="edit-on-click">
<input
:class="sizeClass"
type="text"
v-if="edit"
v-model="editedTitle"
#blur="finishEdit"
#keyup.enter="finishEdit"
v-focus="true"
/>
<span v-show="!edit" #dblclick.prevent="edit = true"></span>
</div>
</template>
The mounted hook I can't figure out how to scope:
mounted() {
let node = document.createElement(this.size); // Takes h-tag (h1, h2 etc.)
let titleText = document.createTextNode(this.finalTitle); // Takes title
node.appendChild(titleText);
node.classList.add("editable-title");
// This breaks the code once there are multiple components in the document
document.getElementsByTagName("span")[0].appendChild(node);
},
How can I scope this in an efficient way? Thank you very much in advance!

Well, with Vue, you'll probably want to avoid creating DOM elements the "native" way whenever possible, as you might run into race condition where Vue is unaware of the existence of these elements which you probably want be reactive at some point in time (in your case, the <span> double-clicking).
What you could do instead, is perhaps to dynamically "switch between" these different headings with this <component> and the v-bind:is prop. Consider the following example:
Vue.component('EditableHeading', {
template: '#editable-heading',
props: {
size: {
type: String,
default: 'h1'
},
value: {
type: String,
required: true
}
},
data() {
return {
editing: false
}
},
methods: {
confirm(e) {
this.$emit('input', e.target.value);
this.close();
},
start() {
this.editing = true;
this.$nextTick(() => {
this.$el.querySelector('input[type="text"]').select();
});
},
close() {
this.editing = false;
}
}
})
new Vue({
el: '#app',
data: () => ({
titleList: [],
text: 'New Title',
size: 'h3'
}),
methods: {
addNewTitle() {
this.titleList.push({
text: this.text,
size: this.size
});
}
}
})
.edit-on-click {
user-select: none;
}
.heading-size {
margin-top: 1rem;
width: 24px;
}
p.info {
background-color: beige;
border: 1px solid orange;
color: brown;
padding: 4px 5px;
margin-top: 2rem;
}
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
<editable-heading
v-for="(title, index) of titleList" :key="index"
v-model="title.text"
:size="title.size">
</editable-heading>
<div>
<label>
Heading size:
<input v-model="size" class="heading-size" />
</label>
</div>
<div>
<label>
Title:
<input v-model="text" />
</label>
</div>
<div>
<button #click="addNewTitle()">Add new title</button>
</div>
<p class="info">
[double-click]: Edit <br />
[enter]: Confirm <br />
[esc/mouseleave]: Cancel
</p>
</div>
<script id="editable-heading" type="text/x-template">
<div class="edit-on-click">
<input
type="text"
v-if="editing"
:value="value"
#blur="close"
#keydown.enter="confirm"
#keydown.esc="close" />
<component :is="size" v-else #dblclick="start">{{value}}</component>
</div>
</script>

Vue.js, change the Array items order and make that change in the DOM as well

In a Vue instance, I have an Array with the name of "block" that holds 4 values. I render this Array to the DOM with a v-for:
<div class="block" #click="shuffleArray()">
<div v-for="(number, index) in block">
<span :class="[`index--${index}`]">{{ number }}</span>
</div>
</div>
this creates a div with 4 spans inside, each of which has a class of "index--0", "index--1", etc.
When clicked, the values of the Array change order:
shuffleArray: function() {
const shifted = this.block.shift();
this.block.push( shifted );
}
While the values do change, they don't move in the actual DOM, how can I achieve that when clicked, the spans actually change place in the DOM? Each span has a style applied to it so I would like a visual representation that the values do change order:
span.index--0 {
background-color: tomato;
}
span.index--1 {
background-color: khaki;
}
span.index--2 {
background-color:lavenderblush;
}
span.index--3 {
background-color: lightcoral;
}
Maybe there is a CSS only solution that does not require DOM manipulation.

I recommend to use list tranisition in order to make that fancy like :
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
}
})
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="list-demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
</div>

How can I implement this using Vue.js?

I am new to Vue.js so I am not sure of the proper way to implement this task correctly. I am looking to build a slider that replaces an image every 4 seconds with a set Interval. Right now it works fine, but I want to use the full power of Vue.js for achieving this goal. I would also like to know how I should terminate the interval when it is unmounted, in order to avoid memory leaks.
<template>
<div class="trending col-4">
<div class="trending-div">
<h1 class="headline">Trending</h1>
<div class="trending-articles">
<div class="trending-articles-names" #click="changeIamge">
<p class="trending-articles-names-number activeButton">1</p>
<p class="trending-articles-names-articleTitle activeBold">Lorem ipsum </p>
</div>
<div class="trending-articles-names" #click="changeIamge">
<p class="trending-articles-names-number">2</p>
<p class="trending-articles-names-articleTitle">Lorem, ipsum </p>
</div>
<div class="trending-articles-names" #click="changeIamge">
<p class="trending-articles-names-number">3</p>
<p class="trending-articles-names-articleTitle">Lorem ipsum </p>
</div>
</div>
<div class="trending-carousel">
<div #click="pic" :style="{ backgroundImage: `url(path/to/image)`}" class="trending-carousel-image active"></div>
<div #click="pic" :style="{ backgroundImage: `url(path/to/image)`}" class="trending-carousel-image"></div>
<div #click="pic" :style="{ backgroundImage: `url(path/to/image)`}" class="trending-carousel-image"></div>
</div>
</div>
</div>
</template>
<script>
export default{
data: function() {
return {
counter: 0,
}
},
mounted: function() {
let carouselImages = document.querySelectorAll('.trending-carousel-image');
let buttons = document.querySelectorAll('.trending-articles-names-number');
let title = document.querySelectorAll('.trending-articles-names-articleTitle');
setInterval(() => {
carouselImages[this.counter].classList.remove("active")
buttons[this.counter].classList.remove("activeButton")
title[this.counter].classList.remove("activeBold")
if(this.counter === 3) {
carouselImages[0].classList.add("active");
buttons[0].classList.add("activeButton");
title[0].classList.add("activeBold");
this.counter = 0;
}else {
carouselImages[this.counter+1].classList.add("active");
buttons[this.counter+1].classList.add("activeButton");
title[this.counter+1].classList.add("activeBold");
this.counter++;
}
},4000);
}
}
</script>

When working with vue you should avoid directly manipulating the dom.
If you want to dynamically add / remove classes to an element you can use the object syntax for v-bind:class
If you need animations / transitions, you can use Vue transitions (transition / transition-group)
If you have many similar elements (e.g. .trending-articles-names in your example code), you can use v-for to create them for you
A very simple carousel thats purely implemented in vue might look like this:
(codepen is available here)
new Vue({
el: '#root',
data: function() {
return {
articles: [{
name: "Lorem Ipsum",
image: "https://via.placeholder.com/300x50.png/FF0000/FFFFFF?text=First"
}, {
name: "Lorem Ipsum 2",
image: "https://via.placeholder.com/300x50.png/00FF00/FFFFFF?text=Second"
}, {
name: "Lorem Ipsum 3",
image: "https://via.placeholder.com/300x50.png/0000FF/FFFFFF?text=Third"
}],
activeImage: 0,
interval: null
}
},
mounted() {
this.interval = setInterval(this.next, 5000);
},
destroyed() {
// remember to clear the interval once the component is no longer used
clearInterval(this.interval);
},
methods: {
prev() {
this.activeImage--;
if (this.activeImage < 0)
this.activeImage = this.articles.length - 1;
},
next() {
this.activeImage++;
if (this.activeImage >= this.articles.length)
this.activeImage = 0;
},
pic(article) {
console.log("CLICKED ON", article);
}
}
});
.carousel {
overflow: hidden;
width: 300px;
display: flex;
}
.carousel img {
transition: transform 0.5s ease;
}
button {
margin: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
<div class="trending col-4">
<div class="trending-div">
<div class="trending-articles">
<div v-for="(article, idx) in articles" :key="idx" class="trending-articles-names" #click="activeImage = idx">{{article.name}}</div>
</div>
<div class="carousel">
<img v-for="(article, idx) in articles" :key="idx" #click="pic(article)" :src="article.image" :style="{transform: `translateX(-${activeImage * 100}%)`}" />
</div>
<button type="button" #click="prev">PREV</button>
<button type="button" #click="next">NEXT</button>
</div>
</div>
</div>
I would suggest using a pre-made carousel component for production projects though.
There are several good libaries available for carousels in vue, to name a few:
Vuetify Carousels (Vuetify is a material design based vue framework)
vue-carousel (a lightwight carousel component)
bootstrap-vue carousel (based on boostrap)