I want to collect the data from input with v-model on nested loop, but idk how to do it cause i'm new in Vue.
Here's the code for the component :
<div
class="date-item"
v-for="(day,index) in dateList"
>
<div class="mt-4">
<div class="form-group">
<ul class="list-task">
<li v-for="(n,n_key) in 10" :key="n_key">
<base-input
:id="'input-text'+n"
:type="'text'"
:disabled="day.isPastDay"
/>
</li>
</ul>
</div>
</div>
</div>
Anyone can help how i created a v-model and data variable for this case ?
With v-model="day.inputs[n_key]"
new Vue({
el: '#app',
data: () => ({
dateList: [{
isPastDay: false,
inputs: []
}]
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>
<div id="app">
<div class="date-item" v-for="(day,index) in dateList">
<div class="mt-4">
<div class="form-group">
<ul class="list-task">
<li v-for="(n,n_key) in 10" :key="n_key">
<input type="text" v-model="day.inputs[n_key]" :disabled="day.isPastDay" />
</li>
</ul>
</div>
</div>
</div>
<pre>{{ dateList }}</pre>
</div>
Related
This is the following code:
<div class="filter-item-wrapper-inner">
<div class="filter-item" #click="filterImages(1)">
<div class="bg-item-img"></div>
<div class="filter-item-overlay active">
<h5>{{webData.filters[0]}}</h5>
</div>
</div>
<div class="filter-item" #click="filterImages(2)">
<div class="bg-item-img"></div>
<div class="filter-item-overlay">
<h5>{{webData.filters[1]}}</h5>
</div>
</div>
<div class="filter-item" #click="filterImages(3)">
<div class="bg-item-img"></div>
<div class="filter-item-overlay">
<h5>{{webData.filters[2]}}</h5>
</div>
</div>
<div class="filter-item" #click="filterImages(4)">
<div class="bg-item-img"></div>
<div class="filter-item-overlay">
<h5>{{webData.filters[3]}}</h5>
</div>
</div>
<div class="filter-item" #click="filterImages(5)">
<div class="bg-item-img"></div>
<div class="filter-item-overlay">
<h5>{{webData.filters[4]}}</h5>
</div>
</div>
<div class="filter-item" #click="filterImages(6)">
<div class="bg-item-img"></div>
<div class="filter-item-overlay">
<h5 class="entertainment-font">{{webData.filters[5]}}</h5>
</div>
</div>
<div class="filter-item" #click="filterImages(7)">
<div class="bg-item-img"></div>
<div class="filter-item-overlay">
<h5>{{webData.filters[6]}}</h5>
</div>
</div>
</div>
Here is the class:
.filter-item .filter-item-overlay.active {
background-color: rgba(0, 0, 0, .7291);
}
So I want to make single selected element to set as active by click. So when the user clicks on specific filter it remains active. Is there some alternative with using v-bind and v-if?
Here is a simplified version of your code using style binding:
var app = new Vue({
el: '#app',
data: {
activeIndex: 0
}
})
.active {
color: red;
}
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<div id="app">
<ul>
<li #click="activeIndex=1" :class="[activeIndex===1 ? 'active' : '']">One</li>
<li #click="activeIndex=2" :class="[activeIndex===2 ? 'active' : '']">Two</li>
<li #click="activeIndex=3" :class="[activeIndex===3 ? 'active' : '']">Three</li>
</ul>
</div>
As suggested you above, you should take a look at the vue doc : https://v2.vuejs.org/v2/guide/class-and-style.html
But this might help you :
<template>
<div
v-for="i in 7"
:key="'img_' + i"
class="filter-item"
#click="filterImages(i)"
>
<div class="bg-item-img"></div>
<div
class="filter-item-overlay"
:class="{'active' : filteredImage === i}"
>
<h5>{{webData.filters[i]}}</h5>
</div>
</div>
</template>
<script>
export default {
name: "Filter",
data() {
return {
filteredImage: -1,
}
},
methods: {
filterImages(index) {
this.filteredImage = index;
}
}
}
</script>
I have VUE Field and Form components which renders a form depending on dynamic data.
<template>
<form #submit="$emit('submit', $event)" >
<template v-for="(item, index) in form.elements">
<Field
v-model="value[index]"
:label="item.options.label"
:type="item.type"
/>
</template>
</form>
</template>
I can render a form by passing structure data
<Form :form="formStructure" v-model="state" #submit="save()" />
This renders the from elements with the order in the formStructure object
What I want to do is to add a decoration template to Form component and customize the view.
<Form :form="formStructure" v-model="state" #submit="save()" >
<template >
<div class="row">
<div class="col-4"><i class="icon-user"></i> <!-- Field component will be render here by Form componenet --> </div>
<div class="col-8"><i class="icon-mail"></i> <!-- Field component will be render here by Form componenet --> </div>
</div>
<h2>A Custom Header</h2>
<div class="row">
<!-- another row with other elements-->
</div>
</template>
</Form>
formStructure data is someting like
{
"form":{
"method":"post",
"id":"formF75a1543a"
},
"elements":{
"username":{
"type":"inputtext",
"options":{
"label":"Pick a username"
}
},
"email":{
"type":"inputtext",
"options":{
"label":"Your e-mail"
}
}
}
}
How can I achive this?
I found the answer after a long research. Slots are not enough to solve the problem. Teleport will do the trick.
<!-- The Form Component -->
<template>
<form #submit="$emit('submit', $event)" >
<slot name="default" ></slot>
<template v-for="(item, index) in form.elements">
<teleport :to="'#'+index" :disabled="!fieldTargetExists(index)">
<Field
v-model="value[index]"
:label="item.options.label"
:type="item.type"
/>
</teleport>
</template>
</form>
</template>
<!-- Using component with a template -->
<Form :form="formStructure" v-model="state" #submit="save()" >
<template >
<div class="row">
<div class="col-4"><i class="icon-user"></i> <span id="username"></span> </div>
<div class="col-8"><i class="icon-mail"></i> <span id="email"></span> </div>
</div>
<h2>A Custom Header</h2>
<div class="row">
<div id="submit"></div>
</div>
</template>
</Form>
My Blade View 'chat.blade.php'
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading"</div>
<div class="panel-body">Chats
<chat-messages :messages="messages"></chat-messages>
</div>
<div class="panel-footer">
<chat-form
v-on:messagesent="addMessage"
:user="{{ Auth::user() }}"
></chat-form>
</div>
</div>
</div>
</div>
</div>
#endsection
This code is extend from app.blade.php, which probably its not really the main focus of the problem
and here is My 2 Component From My Vue JS
'ChatMessages.vue'
<template>
<ul class="chat">
<li class="left clearfix" v-for="message in messages">
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">
{{ message.user.name }}
</strong>
</div>
<p>
{{ message.message }}
</p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: ['messages']
};
</script>
and here is the 'ChatForm.vue'
<template>
<div class="input-group">
<input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="Type your message here..." v-model="newMessage" #keyup.enter="sendMessage">
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat" #click="sendMessage">
Send
</button>
</span>
</div>
</template>
<script>
export default {
props: ['user'],
data() {
return {
newMessage: ''
}
},
methods: {
sendMessage() {
this.$emit('messagesent', {
user: this.user,
message: this.newMessage
});
this.newMessage = ''
}
}
}
</script>
and here is the following screenshot of the problem
Click here for the Picture
as you can see in the screenshot, the chat component from vue.js listed below, wont show up, its just appear blank, only displaying scrollbar,navbar and 'Chats' text. which is came from app.blade.php]
Please help me :). Thanks
You do not commit any messages to your component. :messages="messages" is Vue syntax.
Assuming your controller assigns $messages to your view:
<chat-messages messages="{{ json_encode($messages) }}"></chat-messages>
should do it. You need to use blade variables to assign
I am using vue pretty checkbox to display a checkbox. However, based on if one of the checkboxes is checked or not my content has to change! So, I need something like a listener on those vue pretty checkbox components.
However, because vue pretty checkbox is a package I cannot modify the code. My question now is, how can I listen on those checkboxes if they have changed from another component.
Because the products-manager component gets the values. So, whenever the values of the checkboxes of the p-check inside the product-filter changes, I need to pass that to the products-manager component in order to reload the data!
Any ideas on how I can do this? I have already tried this and this but those aren't working for me...
Very important: The number of checkboxes is dynamically as you can see below. The first two checkboxes are always there but the checkbox below gets genereated by a v-for!
This is my sourcecode so far (home template):
<div id="home" class="row">
<div class="col-xl-12" id="product-sort-and-filter">
<products-filter ref="productsFilter" :product-types-prop="{{ json_encode($productTypes) }}"></products-filter>
</div>
<div class="col-xl-9">
<div class="products">
<products-manager ref="productsManager" :products-prop="{{ json_encode($products) }}" auth="{{ \Illuminate\Support\Facades\Auth::check() }}" :userprop="{{ json_encode(\Illuminate\Support\Facades\Auth::user()) }}" route="{{ route('product.index') }}"></products-manager>
</div>
</div>
<div class="col-xl-3">
<sidebar-manager ref="SidebarManager" :top-products-today-prop="{{ json_encode($products) }}" :top-products-week-prop="{{ json_encode($products) }}" :top-products-month-prop="{{ json_encode($products) }}"></sidebar-manager>
</div>
</div>
products filter component:
<template>
<div class="product-sort-and-filter-wrapper d-flex">
<div class="col-xl-9 product-sorting no-padding">
<ul class="list-inline">
<li class="list-inline-item">Highlights</li>
<li class="list-inline-item">Aktuell</li>
<li class="list-inline-item">Diskutiert</li>
</ul>
</div>
<div class="col-xl-3 product-filter no-padding text-right">
<div class="dropdown d-inline-flex">
<i class="fas fa-filter"></i>FILTERN
<div class="dropdown-menu" style="margin-top: 0px">
<div class="productTypesBoxes dropdown-item pretty-checkbox-wrapper">
<p-check name="productExpiredCheckbox" class="p-svg p-plain p-bigger p-smooth" ref="showExpired" toggle true-value false-value>
<span class="checkbox-label on rubik-medium">Abgelaufene anzeigen</span>
<label slot="off-label"><span class="checkbox-label off rubik-medium">Abgelaufene anzeigen</span></label>
<span slot="extra" class="svg"><i data-feather="check-square"></i></span>
<span slot="off-extra" class="svg"><i data-feather="square"></i></span>
</p-check>
</div>
<div class="dropdown-divider"></div>
<div class="productTypesBoxes dropdown-item pretty-checkbox-wrapper">
<p-check name="productTypeCheckbox" class="p-svg p-plain p-bigger p-smooth" ref="showAllProductTypes" toggle true-value false-value checked>
<span class="checkbox-label on rubik-medium">Alle anzeigen</span>
<label slot="off-label"><span class="checkbox-label off rubik-medium">Alle anzeigen</span></label>
<span slot="extra" class="svg"><i data-feather="check-square"></i></span>
<span slot="off-extra" class="svg"><i data-feather="square"></i></span>
</p-check>
</div>
<div class="productTypesBoxes sub dropdown-item pretty-checkbox-wrapper" v-for="productType in productTypes">
<p-check name="productTypeCheckbox" :value="productType.id" class="p-svg p-plain p-bigger p-smooth" :ref="'productType' + productType.id" toggle>
<span class="checkbox-label on ">{{ productType.label }}</span>
<label slot="off-label"><span class="checkbox-label off ">{{ productType.label }}</span></label>
<span slot="extra" class="svg"><i data-feather="check-square"></i></span>
<span slot="off-extra" class="svg"><i data-feather="square"></i></span>
</p-check>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ProductsFilter",
props: ['productTypesProp'],
data() {
return {
highlights: true,
aktuell: false,
diskutiert: false,
showExipredDeals: false,
productTypes: this.productTypesProp
}
}
}
</script>
<style scoped>
</style>
I have a JSON object which I am repeating with ng-repeat, the keys are strings, and the values are an array. I am listing each of the values as a checkbox. I would like to create a second object which contains a list of only the checkboxes that are checked. I want to preserve the structure of the object with keys and values.
I'm unsure how to bind this to a model properly so that the structure is preserved.
http://jsfiddle.net/NDFc2/3/
This is my HTML
<h3 >Dynamic data binding in AngularJS</h3>
<div ng-app ng-controller="Controller" class="container">
<h4>Inputs</h4>
<ul ng-repeat="(parent, values) in inputs">
<span>{{parent}} : </span>
<li ng-repeat="value in values"><label>{{value}}
<input type="checkbox" ng-model="output[parent]" ng-checked="output[parent]" value="value" >
</input></label>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="(key,value) in inputs">
<li>
{{key}} : {{output[key]}}
</li>
</ul>
</div>
and my JS
function Controller($scope) {
$scope.output = {};
$scope.inputs = {'category': ['one','two','three'], 'color':['blue','green']};
}
Is there some simple way to do this? I have the feeling that I'm missing something minor and this will all work nicely.
My examples have your angular logic in the recommended syntax (non-global). There were also several issues with your markup that I have corrected.
In this example, ng-model="x" is a placeholder that I don't use, but ng-model must be present or an error is thrown. I am using ng-change to handle the link between the checkboxes and $scope.outputs.
Live demo here (click).
Markup:
<div ng-app="myApp" ng-controller="myCtrl">
<h3 >Dynamic data binding AngularJS</h3>
<h4>Inputs</h4>
<ul>
<li ng-repeat="(typeKey, typeVal) in inputs">
<span>{{typeKey}} : </span>
<ul>
<li ng-repeat="value in typeVal">
<label>{{value}}
<input
type="checkbox"
ng-model="x"
ng-change="setOutput(typeKey, $index, value)"
>
</label>
</li>
</ul>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="(key,value) in inputs">
<li>{{key}} : {{outputs[key]}}</li>
</ul>
</div>
JavaScript:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.outputs = {};
$scope.inputs = {
'category': ['one','two','three'],
'color':['blue','green']
};
$scope.setOutput = function(typeKey, $index, value) {
$scope.outputs[typeKey] = $scope.outputs[typeKey] || [];
$scope.outputs[typeKey][$index] = value;
};
});
Another Solution
Live demo here (click).
First, I used ng-init to dynamically add the first-level properties from inputs to outputs. Then you just needed to set your ng-model and ng-checked properties to the correct location in outputs.
Markup:
<div ng-app="myApp" ng-controller="myCtrl">
<h3 >Dynamic data binding AngularJS</h3>
<h4>Inputs</h4>
<ul>
<li
ng-repeat="(typeKey, typeVal) in inputs"
ng-init="outputs[typeKey] = outputs[typeKey] || {}">
<span>{{typeKey}} : </span>
<ul>
<li ng-repeat="value in typeVal">
<label>{{value}}
<input
type="checkbox"
ng-model="outputs[typeKey][value]"
ng-checked="outputs[typeKey][value]"
value="outputs[typeKey][value]"
>
</label>
</li>
</ul>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="(key,value) in inputs">
<li>{{key}} : {{outputs[key]}}</li>
</ul>
</div>
JavaScript:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.outputs = {};
$scope.inputs = {
'category': ['one','two','three'],
'color':['blue','green']
};
});
You need to bind to the value for the parent, as checkboxes don't work like that. Here's an example:
<h3 >Dynamic data binding in AngularJS</h3>
<div ng-app ng-controller="Controller" class="container">
<h4>Inputs</h4>
<ul ng-repeat="(parent, values) in inputs">
<span>{{parent}} : </span>
<li ng-repeat="value in values"><label>{{value}}
<input type="checkbox" ng-model="output[parent][value]" ng+checked="output[parent][value]" value="value" >
</input></label>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="(key,value) in inputs">
<li>
{{key}} : {{output[key]}}
</li>
</ul>
</div>
And in the controller create the keys beforehand
function Controller($scope) {
$scope.output = { 'category': {}, color: {} };
$scope.inputs = {'category': ['one','two','three'], 'color':['blue','green']};
}
jsfiddle: http://jsfiddle.net/5eeVc/
Have a look at this plunk, i have handled two different scenarios. Just sharing it as a knowledge article
Plunk
<h3>First Scenario <small>Handling JSON source </small></h3>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4>Available options</h4>
<div ng-repeat="item in itemList">
<mark>{{item.name}}</mark>
<input type="checkbox" ng-model="modelContainer[$index].checked" />
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4 class="text-success">Selected options</h4>
<ul>
<li ng-repeat="item in modelContainer | filter: {checked:true}">
{{item.item.name}} X
</li>
</ul>
</div>
</div>
</div>
<br>
<p class="text-danger">itemList</p>
<code>{{itemList}}</code>
<br>
<br>
<p class="text-danger">modelContainer</p>
<code>{{modelContainer}}</code>
<hr>
<h3>Second Scenario <small>Handling map Source </small></h3>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4>Available options</h4>
<div ng-repeat="item in Maplist">
<mark>{{item}}</mark>
<input type="checkbox" ng-model="modelContainer1[$index].checked" />
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4 class="text-success">Selected options</h4>
<ul>
<li ng-repeat="item in modelContainer1 | filter: {checked:true}">
{{item.name}} X
</li>`enter code here`
</ul>
</div>
</div>
</div>