Develop Reference

How to remove space between string after paste it in vue2

I have two input which both need to remove the space between the string
I used event.clipboardData.setData but it didn't work
After that, I used this.Name_of_my_state But it returns both pasted item and removed space Item.
Let's take a look at my code to make it clear
<template>
<span>
<input class="form-control inputHeight"
#keydown.space.prevent
#paste.space="remove_on_paste"
v-model="floatingData.from_id">
<input class="form-control inputHeight"
#keydown.space.prevent
#paste.space="remove_on_paste"
v-model="floatingData.to_id">
</span>
</template>
First I tried this but didn't work
new Vue({
data() {
return {
floatingData: {
from_id: "",
to_id: ""
}
}
},
methods: {
// Remove space on paste
remove_on_paste(event) {
let main_text = event.clipboardData.getData("text");
event.clipboardData.setData("text", main_text.replace(/\D/g, ""));
}
}
})
Result:
Then I tried this that pasted both copied and replaced value
new Vue({
data() {
return {
floatingData: {
from_id: "",
to_id: ""
}
}
},
methods: {
// Remove space on paste
remove_on_paste(event) {
let main_text = event.clipboardData.getData("text");
this.floatingData.from_id = main_text.replace(/\D/g, "");
}
}
})
Result:

I was able to get the behavior I think you requested, where you can paste in a string with tailing whitespace, and it will be trimmed. The trick is to prevent the browser from doing anything after the paste using event.preventDefault() and using main_text.trim() to remove whitespace. Please let me know if this is what you're looking for.
(Tested on Google Chrome 91, using this codesandbox)
<template>
<span>
<input class="form-control inputHeight"
#keydown.space.prevent
#paste.space="remove_on_paste"
v-model="floatingData.from_id">
<input class="form-control inputHeight"
#keydown.space.prevent
#paste.space="remove_on_paste"
v-model="floatingData.to_id">
</span>
</template>
<script>
export default {
data() {
return {
floatingData: {
from_id: "",
to_id: ""
}
}
},
methods: {
// Remove space on paste
remove_on_paste(event) {
let main_text = event.clipboardData.getData("text");
event.preventDefault();
this.floatingData.from_id = main_text.trim();
}
}
};
</script>

You should use watchers for this:
data()
{
return {
first_input: '',
second_input: '',
}
},
watch:
{
first_input()
{
this.$nextTick(() =>
{
this.first_input = this.first_input.replace(/\s+/g, '');
})
},
second_input()
{
this.$nextTick(() =>
{
this.second_input = this.second_input.replace(/\s+/g, '');
})
},
}

Vee Validate field validation not updating

I have created a settings page where users can update their email addresses. Everything worked fine but suddenly the validation is not updating anymore. Only the first change of the input field triggers validateState().
Any further changes will not trigger this function so the status of that field stays as it is.
I have compared the code with other components that use the same code and they still work fine.
I am using bootstrap-vue components for the form.
<template>
<div class="row">
<div class="col-md-12">
<b-form #submit="onSubmit">
<b-form-group :label="$t('general.email')"
label-for="settingsEmail"
:invalid-feedback="errors.first('email')">
<b-form-input id="settingsEmail"
type="text"
v-model="form.email"
:disabled="saving"
name="email"
:state="validateState('email')"
v-validate="{required: true, email: true}">
</b-form-input>
</b-form-group>
<b-button type="submit" variant="primary" :disabled="saving || !hasChanged() || errors.any()"><i class="fa fa-refresh fa-spin fa-fw" v-if="saving"></i> {{$t('general.save')}}</b-button>
</b-form>
</div>
</div>
</template>
<script>
import {UPDATE_USER} from '../config/actions'
export default {
name: 'settingsAccount',
data() {
return {
form: {},
saving: false
}
},
computed: {
user: function() {
return this.$store.getters.getUser;
}
},
created() {
this.init();
},
methods: {
init() {
this.form.email = this.user.email;
},
hasChanged() {
if(this.form.email !== this.user.email) {
return true;
}
return false;
},
onSubmit(event) {
event.preventDefault();
this.saving = true;
this.$validator.validateAll().then((result) => {
if (result) {
let data = {};
if(this.form.email !== this.user.email) {
data.email = this.form.email;
}
this.$store.dispatch(UPDATE_USER, data).then(() => {
this.saving = false;
this.$validator.reset();
}).catch(() => {
this.saving = false;
});
} else {
this.saving = false;
}
});
},
validateState(ref) {
if (this.veeFields[ref] && (this.veeFields[ref].dirty || this.veeFields[ref].validated)) {
return !this.errors.has(ref)
}
return null
},
}
}
</script>

The problem you're having is that the form data element is an empty object, so it will only trigger reactivity when the whole object changes. Either you need to change your data to be this:
data() {
return {
form: {email:''},
saving: false
}
},
Or in your init function, explicitly add the email property as reactive:
methods: {
init() {
this.$set(form,'email',this.user.email)
},
//...
If you're not clear on why, you can read the details here: https://v2.vuejs.org/v2/guide/reactivity.html
A working example (minus vuex) here: https://codesandbox.io/s/x4kp93w3o
PS, when writing questions about vue, it's very helpful to boil it down to a simpler example. Get rid of vuex, remove your translation stuff. Sometimes the answer will jump out at you once you have it as simple as possible.

Vue JS nested loop search not returning results

I'm building a key-command resource and giving VueJS a whirl while doing so. I'm a newbie but am gaining the grasp of things (slowly...).
I want to be able to search in a global search form for key commands I'm defining as actions within sections of commands (see data example below). I would like to search through all the actions to show only those that match the search criteria.
My HTML is below:
<div id="commands">
<input v-model="searchQuery" />
<div class="commands-section" v-for="item in sectionsSearched"
:key="item.id">
<h3>{{ item.section }}</h3>
<div class="commands-row" v-for="command in item.command" :key="command.action">
{{ command.action }}
</div>
</div>
</div>
My main Vue instance looks like this:
import Vue from 'vue/dist/vue.esm'
import { commands } from './data.js'
document.addEventListener('DOMContentLoaded', () => {
const element = document.getElementById("commands")
if (element != null) {
const app = new Vue({
el: element,
data: {
searchQuery: '',
commands: commands
},
computed: {
sectionsSearched() {
var self = this;
return this.commands.filter((c) => {
return c.command.filter((item) => {
console.log(item.action)
return item.action.indexOf(self.searchQuery) > -1;
});
});
},
}
});
}
});
And finally the data structure in data.js
const commands = [
{
section: "first section",
command: [
{ action: '1' },
{ action: '2' },
{ action: '3' },
],
},
{
section: "second section",
command: [
{ action: 'A' },
{ action: 'B' },
{ action: 'C' },
]
},
]
export { commands };
I'm able to output the commands using the console.log(item.action) snippet you see in the computed method called sectionsSearched.
I see no errors in the browser and the data renders correctly.
I cannot however filter by searching in real-time. I'm nearly positive it's a combination of my data structure + the computed method. Can anyone shed some insight as to what I'm doing wrong here?
I'd ideally like to keep the data as is because it's important to be sectioned off.
I'm a Rails guy who is new to this stuff so any and all feedback is welcome.
Thanks!
EDIT
I've tried the proposed solutions below but keep getting undefined in any query I pass. The functionality seems to work in most cases for something like this:
sectionsSearched() {
return this.commands.filter((c) => {
return c.command.filter((item) => {
return item.action.indexOf(this.searchQuery) > -1;
}).length > 0;
});
},
But alas nothing actually comes back. I'm scratching my head hard.

There is a issue in your sectionsSearched as it is returning the array of just commands.
See this one
sectionsSearched() {
return this.commands.reduce((r, e) => {
const command = e.command.filter(item => item.action.indexOf(this.searchQuery) > -1);
const section = e.section;
r.push({
section,
command
});
}, []);
}

const commands = [
{
section: "first section",
command: [
{ action: '1' },
{ action: '2' },
{ action: '3' },
],
},
{
section: "second section",
command: [
{ action: 'A' },
{ action: 'B' },
{ action: 'C' },
]
},
]
const element = document.getElementById("commands")
if (element != null) {
const app = new Vue({
el: element,
data: {
searchQuery: '',
commands: commands
},
computed: {
sectionsSearched() {
var self = this;
return this.commands.filter((c) => {
// the code below return an array, not a boolean
// make this.commands.filter() not work
// return c.command.filter((item) => {
// return item.action.indexOf(self.searchQuery) > -1;
// });
// to find whether there has command action equal to searchQuery
return c.command.find(item => item.action === self.searchQuery);
});
},
}
});
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="commands">
<input v-model="searchQuery" />
<div class="commands-section" v-for="item in sectionsSearched"
:key="item.id">
<h3>{{ item.section }}</h3>
<div class="commands-row" v-for="command in item.command" :key="command.action">
{{ command.action }}
</div>
</div>
</div>
Is that work as you wish ?

sectionsSearched() {
return this.commands.filter((c) => {
return c.command.filter((item) => {
return item.action.indexOf(this.searchQuery) > -1;
}).length > 0;
});
},
}
since filter will always return an array(empty or not) which value always is true.

Vue component watch

all how i can watch changes in my component in data?
I need watch when user choose car brand to take from server models for that brand
this is my code
Templete
<template>
<div class="category-info">
<div v-for="input in inputs.text">
<label >{{ input.placeholder}}</label>
<input type="text" id="location" :name="input.name" v-model="input.value" #click="console">
</div>
<div class="select" v-for="select in inputs.select">
<label >{{ select.placeholder }}</label>
<my-select :data="select" v-model="select.value"></my-select>
</div>
<button #click="console">click</button>
</div>
Script
<script>
export default {
name: "profile-add-inputs",
props: ['category'],
data() {
return {
inputs: {
text : {},
select: {}
},
}
},
methods: {
getCategories(){
axios.get('/profile/inputs', {
params: {
category: JSON.stringify(this.category.href)
}
})
.then((response) => {
this.inputs.text = response.data.text;
this.inputs.select = response.data.select;
for(let key in this.inputs.text){
this.inputs.text[key].value = '';
}
for(let key in this.inputs.select){
this.inputs.select[key].value = '';
if(this.category.href.sub == 'car' && this.inputs.select[key].name == 'brand'){
console.log('CAR BREND');
this.$watch.inputs.select[key].value = function () {
console.log(this.inputs.select[key].value);
}
}
}
},this)
.catch(function (error) {
console.log(error);
});
},
console(){
console.log(this.inputs.select);
}
},
watch: {
category : function () {
this.getCategories();
console.log('categoty');
},
inputs : {
handler() {
console.log('watch inputs');
}
}
}
}
So, i tried to use watch and $watch but its not working, plz give me a reason why that not work, or maybe some another way to resolve this problem
this.$watch can i create dynamiclly watchers with this stement?

The correct syntax is
watch : {
inputs : function(val, oldVal){
//val : New value
//oldVal : Previous value.
}
}

AngularJS filter out select option based on another selection

Hello Angular experts,
I have been banging my head for half of the day to make a list of selections where its options can be hide or disable based on other selections. This is the sample coding of the page
https://jsbin.com/lufugo/1/edit?html,js,output
what I want to do is on a particular day if a room is selected, I want to remove that room select option from the other selection box of the same day.
Can some one help me out please.

First of all, I extremely recommend you to use ngOptions instead of ngRepeat. ngOptions was made exactly for this kind of things.
Well, to achieve what you want I think the simplest way is to create a new property (which, in my solution, I called it as isAvailable - boolean -), then you can easily manipulate your items based on this property.
Take a look on my solution:
(function() {
"use strict";
angular.module('app', [])
.controller('mainCtrl', function($scope) {
$scope.roomAllocation = {
"dates":[
{
"date":"2016-07-16",
"dayRooms":[
{
"room":1,
"occupancy":2,
"roomType":"Standard",
"availableRooms":[
{
"id":15,
"roomNumber":200
},
{
"id":16,
"roomNumber":201
},
{
"id":17,
"roomNumber":202
},
{
"id":18,
"roomNumber":203
}
]
},
{
"room":2,
"occupancy":3,
"roomType":"Standard",
"availableRooms":[
{
"id":15,
"roomNumber":200
},
{
"id":16,
"roomNumber":201
},
{
"id":17,
"roomNumber":202
},
{
"id":18,
"roomNumber":203
}
]
}
]
},
{
"date":"2016-07-17",
"dayRooms":[
{
"room":1,
"occupancy":2,
"roomType":"Standard",
"availableRooms":[
{
"id":15,
"roomNumber":200
},
{
"id":16,
"roomNumber":201
},
{
"id":17,
"roomNumber":202
},
{
"id":18,
"roomNumber":203
}
]
},
{
"room":2,
"occupancy":1,
"roomType":"Standard",
"availableRooms":[
{
"id":15,
"roomNumber":200
},
{
"id":16,
"roomNumber":201
},
{
"id":17,
"roomNumber":202
},
{
"id":18,
"roomNumber":203
}
]
}
]
}
]
};
// Function to set all rooms as available on initialization
function set_availables() {
$scope.roomAllocation.dates.forEach(function(date) {
date.dayRooms.forEach(function(dayRoom) {
dayRoom.availableRooms = dayRoom.availableRooms.map(function(avalRoom) {
avalRoom.isAvailable = true;
return avalRoom;
});
});
});
}
set_availables();
$scope.newRoomObject = {};
// Fires on change of the select
$scope.disable_room = function(dateIndex, roomIndex) {
var currDate = $scope.roomAllocation.dates[dateIndex];
// The current number room selected
var selectedRoomNumber = $scope.newRoomObject[currDate.date][roomIndex + 1].roomNumber;
// Setting property isAvaliable to true / false
currDate.dayRooms.forEach(function(value, index) {
if (index != roomIndex) {
value.availableRooms = value.availableRooms.map(function(avalRoom) {
avalRoom.isAvailable = avalRoom.roomNumber != selectedRoomNumber;
return avalRoom;
});
}
});
}
});
})();
div span {
margin-right: 15px;
}
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<div ng-repeat="date in roomAllocation.dates track by $index">
<div ng-repeat="rooms in date.dayRooms track by $index">
<span ng-bind="date.date"></span> <span ng-bind="'Room ' + '#' + rooms.room"></span> <span ng-bind="rooms.roomType"></span> <span ng-bind="'Occ: ' + rooms.occupancy"></span>
<span>
<select ng-options="room as room.roomNumber for room in rooms.availableRooms | filter: { isAvailable: true }" ng-model="newRoomObject[date.date][rooms.room]" ng-change="disable_room($parent.$index, $index)">
<option value="" disabled>Select Room</option>
</select>
</span>
</div>
<hr>
</div>
</body>
</html>
Note: If you have any doubts you can ask me.
I hope it helps!!