I'm trying get a insertion into an object at Vue, but I can't...
data: {
formValid: {},
buttonIsDisabled: true,
statusModal: 'active',
},
methods: {
closeModal() {
this.statusModal = ''
this.formValid.test = "test"
}
},
watch: {
formValid: {
handler(o, n) {
console.log(o)
console.log(n)
},
deep: true
}
}
When I do 'this.formValid.test = "test"' I don't go to Watch, but if I have this object into of the formValid and I change it, in this case, I go to Watch.
Do you know how can I get this event?
You cannot add reactive properties to an object on the fly with Vue2 like this.
You'll need to either define them in data:
data: {
formValid: {
test: '',
},
buttonIsDisabled: true,
statusModal: 'active',
},
or use:
Vue.set(this.formValid, 'test', 'test');
Related
This question already has answers here:
Lodash: how do I use filter when I have nested Object?
(5 answers)
Closed 1 year ago.
I am unable to filter using lodash in computed property in nuxt.
I fetch a list of blogs from an API and in Vue debugger I am getting the following error
(error during evaluation)
I want to filter list of data which has deleted status is false.
Here is the the JS
<script>
import { _ } from 'lodash'
export default {
data() {
return {
data: [
{
deleted: {
status: false,
date: '2021-12-20T10:18:33.231Z',
},
blogUID: '*********',
title: 'Guide To Visiting Inflatable Island In The New Normal',
},
{
deleted: {
status: false,
date: '2021-12-20T10:18:33.231Z',
},
blogUID: '*********',
title: '24 Best Places to Celebrate New Year in India',
},
{
deleted: {
status: false,
date: '2021-12-20T10:18:33.231Z',
},
blogUID: '*********',
title: 'Top Things to Do in Dubai',
},
{
deleted: {
status: true,
date: '2021-12-20T10:18:33.231Z',
},
blogUID: '*********',
title: 'Best Places to Celebrate New Year 2022',
},
],
}
},
computed: {
activeData() {
return _.filter(this.data, { 'deleted.status': false })
},
},
}
</script>
You don't really need lodash for this.
Use a vanilla JS filter method like this
return this.data.filter((el) => !el.deleted.status)
or this if you want to check for strict equality to false, rather than just using a falsy value (undefined, null, etc...)
return this.data.filter((el) => el.deleted.status === false)
While using lodash is not necessary, to answer your question
return _.filter(fields, 'deleted.status', false)
or
return _.filter(fields, {deleted: {status: false}})
I have a computed property that pulls some data out of my vuex store like so:
computed: {...mapGetters(["allCategories"])},
Each category in this.allCategories looks like so:
{ "id": "123", "name": "Foo" }
I want to pull out every name field from this.allCategories before the component is mounted in put each name into an reactive data property called categoryNames.
How can I achieve this?
What I have tried so far is below:
beforeMount() {
for (let i = 0; i < this.allCategories.content.length; i++) {
var name = this.allCategories.content[i].name
this.categoryNames.push(name);
}
},
Which gives the following error:
Error in beforeMount hook: "TypeError: Cannot read property 'length' of undefined"
this.allCategories looks like so:
{
"content": [
{
"id": "efb038df-4bc9-4e31-a37a-e805c9d7294e",
"parentCategoryId": "8ffc214f-fff1-4433-aac9-34d13b4e06c5",
"name": "Foo"
},
{
"id": "5905d437-db2e-4f91-8172-c515577b86e9",
"parentCategoryId": "5905d437-db2e-4f91-8172-c515577b86e9",
"name": "Bar"
},
{
"id": "8ffc214f-fff1-4433-aac9-34d13b4e06c5",
"parentCategoryId": "8ffc214f-fff1-4433-aac9-34d13b4e06c5",
"name": "Baz"
}
],
"number": 0,
"size": 100,
"total": 3
}
You could use the created hook to call a vuex action that calls a vuex mutation that grabs a state, do your parsing and store the parsed data in a new array in state, then use a getter to grab the parsed array from state.
created() {
this.$store.dispatch('someAction');
},
computed: {
...mapGetters({
parsedArray: 'getParsedArray',
})
}
export const actions = {
someAction({ commit }) {
commit('SOME_MUTATION');
},
}
export const mutations = {
SOME_MUTATION(state) {
let data = state.originalData;
let parsedArray = [];
// Do parsing work here
state.parsedArray = parsedArray
},
}
export const getters = {
getParsedArray: state => {
return state.parsedArray;
},
}
Getting error unknown top level operator $regex
search.vue `
let questDocuments = await conversation
.find({ query: { $limit: 100, $search: q, skippop: true } })
.then(response => {`
q is the string being passed
service hook
before: {
all: [],
find: [
hookBeforeFind,
search({
fields: ["label"],
deep: true
})
],
Model
const conversation = new Schema(
{
label: { type: String, required: true },
nodeId: { type: String, required: true },
details: { type: String },
url: { type: String },
creator: { type: String },
handle: { type: String },
date: { type: String },
From search bar add expression to search. E.g "the"
Add $regex to the whitelist option of the Mongoose service:
app.use('/messages', service({
Model,
whitelist: [ '$regex' ]
}));
try this
// regex to find records that start with letter any name , example "e"
Model.aggregate([
{
$match: {
field_name: {
$regex: "^" + searchName,
$options: "i"
}
}
}]).exec(function(err, result) {
if (err) { // handle here }
if (result) { // do something }
}
What I have is an object like this:
formData = {
name: {
value: '',
valid: true
},
zip: {
value: 'ff',
valid: false
},
//...
}
And I want to filter this so that I only have the invalid objects. The problem with _.where and _.filter is that it returns an object like this:
[
0: {
value: '',
valid: false
},
1: {
value: '',
valid: false
}
]
I need the parent key names, name and zip to be included. How do I do this?
You are looking for _.pick() my friend.
https://lodash.com/docs#pick
_.pick(formData, function(value) {
return value.valid;
})
Good luck! :)
I am trying to load a json store when I click on a particular row in another grid. Can anyone see what I am doing wrong here? In the ext-all.js the error comes back as data is undefined (from debugger).
Ext.define('Documents', {
extend: 'Ext.data.Model',
fields: [
{ name: 'index', type: 'int' },
{ name: 'path', type: 'string' }
]
});
var documents = new Ext.data.JsonStore({
model: 'Documents',
root: 'groupdocuments',
autoLoad: false
});
// in the Ext.grid.Panel
listeners: {
itemclick: function () {
var itemgroupid = rec.get('groupid');
Ext.Ajax.request({
url: '/GetDocuments',
params: { groupId: itemgroupid },
success: function (result) {
var jsondata = Ext.decode(result.responseText);
documents.loadData(jsondata);
}
});
}
}
// the sample json returned from url
// { "groupdocuments": [{ "index": 1, "path": "1.doc" }, { "index": 2, "path": "2.doc" }, { "index": 3, "path": "3.doc" }] }
it looks like you need to escape the path data. should be { path: "C:\\something\\" }
Also why not use the grid Grouping feature?
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.feature.Grouping
In looking further it looks like the loaddata function is expecting an array. Not a json object with a rootdata object like you are giving it. change the listener to the following:
var jsondata = Ext.decode(result.responseText);
documents.loadData(jsondata.groupdocuments);
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-loadData
alternatively you should be able to use loadRawData with the full json object.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-loadRawData