This code is trying to add a class to an element. the class definition is located in meteor_app_root/stylesheets/style.css .wrongInput { color: red; }
This method returns fine but the text inside the input element is not changing to red as I am expecting.
edited
I get browser console print "server returned" but the addClass line is not doing its work.
edited
changing the style from color: Red; to border-color: Red; makes the boarder colour red.
What am I doing wrong? Thanks
Template.footer.events({
'click button': function () {
var doc = {};
$('input').each(function () {
this.value && (doc[this.name]=this.value)
});
Meteor.call('processInputs', doc, function (err, res) {
if (res) {
console.log("res " + res);
$('[name="plate"]').addClass("wrongInput");
}
});
}
});
//server.js
Meteor.methods({
processInputs: function (doc) {
return "server acted";
}
});
<template name="content">
<div class="container">
<div class="row">
<section class="col-xs-12">
<form>
<ul class="list-group">
{{#each this.items}}
<li>
<input class="list-group-item basic-vertical-spacing col-xs-12" type="text"
name={{name}} placeholder={{placeholder}}>
</li>
{{/each}}
</ul>
</form>
</section>
</div>
</div>
</template>
I see what it is, you didn't have the if(err):
Meteor.call('myFunction', function(err, data) {
if (err)
{
$('[name="plate"]').addClass("wrongInput");
}
});
Related
First project with Vue3, trying to determine if a named slot has content supplied on a given page.
In my template I have this:
<div
:class="{ 'py-20': hasTopContent }"
>
<slot name="top-content" />
</div>
In my code I have the following:
setup (_, { slots }) {
const hasTopContent = computed((slots) => {
console.log(slots.topContent);
return slots.topContent && slots.topContent().length;
});
return {
hasTopContent
}
}
The above console.log is returning TypeError: Cannot read properties of undefined (reading 'topContent'). What have I missed? Thanks!
Michal Levý is right
var Main = {
components: {
'my-component': MyComponent,
},
data() {
return {
}
},
methods: {
}
};
const app = Vue.createApp(Main);
app.mount("#app")
<html>
<head>
<style>
.my-component {
background-color: #fafafa;
padding: 5px 20px 20px 20px;
}
</style>
</head>
<body>
<div id="app">
<h3>With top slot</h3>
<my-component class='my-component'>
<template v-slot:top>
<h4>Top Slot</h4>
</template>
</my-component>
<h3>Without top slot</h3>
<my-component class='my-component'>
</my-component>
<hr style='padding: 20px 20px 20px 20px;' />
</div>
<script src="//unpkg.com/vue#next"></script>
<script type="text/x-template" id="my-component">
<div
:class="{ 'py-20': hasTopContent }">
<slot name="top" />
hasTopContent: {{hasTopContent}}
</div>
</script>
<script type="text/javascript">
var MyComponent = {
template: '#my-component',
setup(_, { slots }) {
const hasTopContent = Vue.computed(() => {
return slots.top && slots.top().length > 0;
});
return { hasTopContent }
}
}
</script>
</body>
</html>
I have wrapper div with padding and I am dynamically adding items inside of it.
I don't want any padding on wrapper div when there is no item in it.
I have created computed method isEmpty to check if there are items or not and used it to add optional class :class={ className: isEmpty } but it doesn't work.
Here is the fiddle link: https://jsfiddle.net/2u9rtdmh/3/
You should wrap an expression for :class into ":
:class="{ className: isEmpty }"
You should read the console errors when trying to diagnose problems, i.e. your jsfiddle doesn't even have an #app element.
The correct syntax for your scenario would be :class="{ 'padding0' : isEmpty }"
Binding HTML Classes
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: "#app",
data: {
},
computed: {
isEmpty() {
return true;
}
}
})
body {
background-color: black;
}
.my-wrapper {
padding: 32px;
background-color: white;
}
.padding0 {
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div :class="{ 'padding0' : isEmpty }" class="my-wrapper">
<div>
<div>
</div>
</div>
</div>
</div>
I need to change the border color of the input if the customer already filled in the field.
How can I do this using VueJS ?
<div class="some-basic-div", '#change' => 'checkForInput'>
<div class="dc-form-group ">
<input type='text' id='first_name' >
</div>
<div class="dc-form-group ">
<input type='text' id='last_name' >
</div>
<div class="dc-form-group ">
<input type='text' id='some_text' >
</div>
</end>
I have tried to use pure JavaScript.
checkForInput: function(e) {
let targetDiv = event.target;
if (targetDiv.value == "") {
targetDiv.classList.remove("mod-group-success");
} else {
targetDiv.classList.add("mod-group-success") ;
}
}
So when I am changing the input I need to change the style of the input which I filled in.
I've wrote this code for handling the issue:
Vue.config.productionTip = false
app = new Vue({
el: "#app",
data: {
testValue: ''
}
},
methods: {
checkForInput: function(e){
let input = event.target
if (input.value != "") {
input.classList.add("mod-group-success") ;
} else {
input.classList.remove("mod-group-success");
}
}
}
})
And putted on front end:
'#change' => 'checkForInput'
Uses Class & Styles binding,
below is one simple demo for class binding.
Vue.config.productionTip = false
app = new Vue({
el: "#app",
data: {
testValue: ''
},
computed: {
computedInputStyleEnable: function () { // or use one method instead of computed property
//apply your own logic at here to determinate if enable input-has-value-style
return this.testValue && this.testValue.length > 0
}
},
methods: {
applyInputStyle: function (targetInput) { // bind with one method and return Array
return [targetInput && targetInput.length > 0 ? 'input-has-value-style' : 'input-no-value-style']
}
}
})
.input-has-value-style {
border: 2px solid green;
background-color:lightgreen;
}
.input-no-value-style {
border: 2px solid red;
background-color:pink;
}
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<div>
<p>Already filled in {{testValue.length}} characters.</p>
<input type='text' v-model="testValue"
:class="{'input-has-value-style': computedInputStyleEnable}"
/>
</div>
<div>
<p>Already filled in {{testValue.length}} characters.</p>
<input type='text' v-model="testValue"
:class="applyInputStyle(testValue)"
/>
</div>
</div>
I am trying to use masonry in my application. Following is my component template.
<template>
<div>
<section class="section">
<div class="container">
<div class="row team">
<div class="col-md-4 col-sm-6 member" v-for="team in teamMembers">
<div class="team__item">
<div class="team__info">
<h4>{{team.name}}</h4>
<small>{{team.title}}</small>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script src="https://unpkg.com/masonry-layout#4.1.1/dist/masonry.pkgd.min.js"></script>
<script>
export default {
data() {
return {
teamMembers: []
}
},
mounted() {
this.getTeamMembers();
},
methods : {
getTeamMembers : function() {
this.$http.get('teamMembers').then(response =>{
// console.log(response);
if(response.data.status=200) {
this.teamMembers = response.data.teamMembers;
this.$nextTick(function() {
var $container = $('.team');
$container.masonry({
columnWidth: '.member',
itemSelector: '.member'
});
})
}
})
}
}
}
</script>
I get the following error whenever the view is getting rendered.
TypeError: $container.masonry is not a function
Can you please let me know what I am doing wrong here ?
You can get vue component DOM element by this.$el. So you can do the following:
$(this.$el.querySelector('.team')).masonry({
columnWidth: '.member',
itemSelector: '.member'
});
But remember this is valid as long as your component is not a Fragment Instance i.e. it has a single root HTML tag.
You many need to put following script line in index.html, so that it loads properly.
<script src="https://unpkg.com/masonry-layout#4.1.1/dist/masonry.pkgd.min.js"></script>
I want to show different color for the name of a person if he is Present or Absent.
working in ion view
<ion-view view-title="{{employee.firstName }}">
<ion-content has-header="true" padding="true">
<div ng-style="{{employee.tStatus}} === 'Present' ? { color:'green' } : { color:'red'}"> {{employee.name }}</div>
</ion-content>
</ion-view>
And its not working in any way
Any recommendation please
HTML
<ion-view view-title="{{employee.firstName }}">
<ion-content has-header="true" padding="true">
<div ng-class="{'green':employee.tStatus == 'Present','color: red':employee.tStatus == 'Absent'}">{{employee.name }}
</div>
</ion-content>
</ion-view>
SO Demo
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.employee = {
tStatus: 'Present',
name: 'Sameed'
}
});
.green {
color: green;
}
.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-class="{'green':employee.tStatus == 'Present','color: red':employee.tStatus == 'Absent'}">{{employee.name }}
</div>
</div>
You could use a function which gives the right color:
var app = angular.module('app', []);
app.controller('employeeCtrl', function($scope) {
$scope.employee = {
tStatus: 'Absent',
name: 'Foo'
};
$scope.getColorClass = function(employee)
{
switch(employee.tStatus)
{
case 'Present':
return "green";
case 'Absent':
default:
return "red";
}
};
});
it becomes in handy to pass the emploee in to it. if you want to add more classes, you can just modify your function inside your controller.
you can also add multiple classes. separate them with a space while returning.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="employeeCtrl">
<div ng-class="getColorClass(employee)">
{{employee.name}}
</div>
</div>
and in your css define the classes
.red {
color: red;
}
.green {
color: green;
}
var app = angular.module('app', []);
app.controller('employeeCtrl', function($scope) {
$scope.employee = {};
$scope.employee.tStatus = 'Absent';
$scope.employee.name = "Foo";
$scope.getColorClass = function(employee) {
switch (employee.tStatus) {
case 'Present':
return "green";
case 'Absent':
default:
return "red";
}
};
});
.red {
color: red;
}
.green {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="employeeCtrl">
<div ng-class="getColorClass(employee)">
{{employee.name}}
</div>
</div>