My lang file:
AccountNotifications: {
createdWithName: 'Account «{account}» created',
created: 'Account created | Accounts created',
}
my submit method
submit()
this.$notifications.add({
type: 'success',
html: accounts.length === 1
? this.$tc('AccountNotifications.created', 1)
: this.$tc('AccountNotifications.created', 2),
});
My output
app.js:290949 TypeError: this.$tc is not a function
Whats wrong?
$tc() is not actually needed. The $t() function supports pluralization now.
Related
How do i push my results into a data object please
I would like to push the :key to the id field and the :data to map across to my other data fields
my data object is called orgs: []
I have the following data returned from my get query
[{…}]
0:
data: {person: 'John', orgName: 'test', due: 'this is due'}
key: "11ed25ccf7548160bff2ab4c1d56ee40"
I have tried
this.$db.collection('orgs').get({ keys: true })
.then
(response => {
console.log('orgs: ', response) <--- this displays the results
this.orgs.forEach(response => {
const data = {
'person': response.data.person,
'orgName': response.data.orgName,
'due': response.data.due,
'id': response.key
}
this.orgs.push(data)
})
});
I get no errors but my this.orgs data item remains empty so assume I am not updating the array for some reason
Thanks
I seem to be able to populate it in a simple way as follows
this.$db.collection('orgs').get({ keys: true })
.then
(response => {
this.orgs = response
console.log('response:', this.orgs)
})
Is there any issue with this approach for just getting my results or should I be using push?
Please I have a return values in inside an array in a Laravel Controller. I want to display the in a Vue Template but am having Issue. I need Assistance please.
public function search(Request $request)
{
$batchResults = \DB::table('patient')
->select('*')
->join('registrations', 'patient.patient_id', 'registrations.patient_id')
->where('patient.name', 'like', '%' . $request -> name . '%')
->whereBetween('registrations.created_at', [date($request->from), date($request->to)])
->get();
$search = $request -> name;
return [ $batchResults, $batchResults ];
I want to dispaly [ $batchResults, $batchResults ] resut in vue Template
this is the console.log results
(2) [Array(1), "James Asay", __ob__: Observer]
0: [{…}, __ob__: Observer]
1: "James Asaye"
length: 2
__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
__proto__: Array
Vue Component
searchBatch(){
axios.post('/search-results', this.form).then((res)=>{
this.batchResource = res.data
this.display = true
console.log(res.data)
})
}
Allright, one useful strategy to debugging these sorts of problems,
in your template add:
<pre>{{$data}}</pre>
So you can see all the data that is available to you in your template.
As for why it isn't working. You receive batchResource from your server which is an array: [ $batchResult, $batchResult ],
Either change your searchBatch function to adapt to this situation, like so:
searchBatch(){
axios.post('/search-results', this.form).then((res)=>{
// res.data = [ $batchResult, $batchResult ]
// take the first list of results:
this.batchResource = res.data[0]
this.display = true
console.log(res.data)
})
}
Or don't change the search function and deal with it in your template:
<tr v-for="batch in batchResource[0]" :key="batch.id">
<th scope="row">{{batch.patient_number}}</th>
<td>{{batch.patient_name}} | {{batch.patient_gender}}</td>
</tr>
I try to filter my list with 2 select lists based on the selected value. It seems like my computed filter is not working?
You should be able to filter the list on 'Price from' and 'Price to'
List.vue
My computed filter property:
filteredData() {
const LowerCaseSearch = this.search.toLowerCase();
return this.products.filter(
product =>
(product.name.toLowerCase().includes(LowerCaseSearch) ||
product.category.toLowerCase().includes(LowerCaseSearch)) &&
(!this.checked.length || this.checked.includes(product.category)) &&
(!this.selectedFrom.length || this.selectedFrom.includes(product.price)) &&
(!this.selectedTo.length || this.selectedTo.includes(product.price))
);
},
In my registered component I use v-model to bind to the computed property selectedFrom
<Price v-model="selectedFrom" />
How do I bind to the other property selectedTo in one v-model and what's wrong with my filter?
I also use a prefix 'From' and 'To' to put in front of the options.
data: () => {
return {
selectedFrom: '0,00',
priceFrom: [
{ prefix: 'From', text: '0,00', value: '0,00' },
{ prefix: 'From', text: '200,00', value: '200,00' },
{ prefix: 'From', text: '400,00', value: '400,00' }
],
selectedTo: 'No max',
priceTo: [
{ prefix: 'To', text: '400,00', value: '400,00' },
{ prefix: 'To', text: '600,00', value: '600,00' },
{ prefix: 'To', text: '800,00', value: '800,00' },
{ text: 'No max', value: 'No max' }
]
}
},
Is there a more elegant and D.R.Y way to do this?
Here is a sandbox what I have so far.
You should bind an object to your v-model on the <price> component.
This way you can pass multiple values to and from your component, without having to use multiple props.
I would also suggest you convert your value in your selects to numbers, so it's easier to use them to compare to your prices.
You've also defined data properties and computed properties in the sandbox (<price> component) with the same name, this is not possible. So you should remove the data properties and stick to the computed ones to handle your data.
Fork of your sandbox with my suggested changes.
I'm trying to use Yup to validate data in an array. For example, this is my initialValue:
{name:'',extra:[]}
After dynamic render the form field , the initialValue will become like this:
{name:'',extra:[{label:'age',value:'',required:true}]}
I want to set the validation scheme to validate the 'value' in the object only when 'required' is true.
I use this data to mock the situation:
{name:'john',extra:[{label:'age',value:'',required:true}]};
Method that i had try:
const validationschema = yup.object().shape({
name: yup.string().required(),
extra: yup.lazy((value,index)=>{
return yup.mixed().required();
})
})
There should be an error when the user submit , because the 'value' for age is empty.
I not sure why, i can't really validate the 'value'. How do I change my validationschema so it can validate the 'value' ?
Try to validate like:
name: yup.string().required(),
extra: yup.array()
.of(
yup.object().shape({
required: yup.bool(),
value: yup.object().when('required', {
is: true,
then: yup.string().required('Please, select position')
}),
})
)
There you should check field required. If it true you validate it.
This is for a vueJS form. I have a nested value named "medications" I'm trying to submit for a form....I have this code in my template and data area that is related to medications. after I select the medication from the select box and enter the remaining fields and submit I get an error telling me I'm not submitting all my values...here are snips from my code...
NOTE: I'm not showing the entire form...only the part related with medication form field.
<template>
...
<div class="col-sm-2">
<b-form-select v-model="medication">
<option selected :value="null">Medication</option>
<option value="name" v-for="catMed in catMedications">{{catMed.medication.name}}</option>
</b-form-select>
</div>
...
</template>
data(){
...
duration: '',
frequency: '',
name: '',
medication: {name: '', duration: '', frequency: '', dosage: '', notes: ''},
...
(also, here is my POST function..if it helps)
postFeedings(catID, catName) {
const vm = this;
axios.post(`/api/v1/carelogs/`,{
cat: {id: catID, name: catName},
weight_unit_measure: 'G',
weight_before_food: this.weight_before_food,
food_unit_measure: 'G',
amount_of_food_taken: this.amount_of_food_taken,
food_type: this.food_type,
weight_after_food: this.weight_after_food,
stimulated: this.stimulated,
stimulation_type: this.stimulation_type,
medication: {name: vm.name, duration: vm.duration, frequency: vm.frequency, dosage: vm.dosage, notes: vm.notes},
medication_dosage_unit: 'ML',
medication_dosage_given: this.medication_dosage_given,
notes: this.notes
})
.then(response => {
console.log(response);
response.status === 201 ? this.showSwal('success-message','Carelog added') : null;
this.getFeedings(catName);
})
.catch(error => {
console.log(catID, catName);
console.log(error);
this.showSwal('auto-close', error);
})
}
ERROR: This is the error I get back ....
{"medication":{"frequency":["This field may not be blank."],"name":["This field may not be blank."]}}
ALL THE OTHER PARAMS ARE BEING SENT...but the ones for medication are not...
What am I doing wrong?
EDIT: updated axios post as Husam Ibrahim suggested
Like Husam says, In a function definition, this refers to the "owner" of the function. So when u access this in the axios function, this refers to the axios function, not to the vue instance.
Also - what i like to do is, create the object in the data of the vue instance, and use that for your post. Makes much cleaner code, and vue can access the object and properties.
Like this:
data () {
myObject: {
data1: 'abc',
data2: 'def',
data3: 123,
data4: false
}
}
and the axxios function like this:
const vm = this;
axios
.post('url.here', vm.myObject)
.then(response => {
// Handle response..
});
In vue you can use v-model="myObject.data1" to access the properties. This way you can use axxios get and assign the result to vm.myObject and vue will render the new data.
The key was in how I was getting "name" in my template. So I changed it up to this...
<div class="col-sm-2">
<b-form-select v-model="medication">
<option selected :value="null">Medication</option>
<option :value=catMed.medication.name v-for="catMed in catMedications">{{catMed.medication.name}}</option>
</b-form-select>
</div>
NOTE: see how :value=catMed.medication.name is configured? That's the key. now when I inspect my params in the browser I can see that I'm setting Medication.name to the value I intend.
And inside my axios.post I change the medication line to this...
...
medication: {name: this.medication, duration: this.duration, frequency: this.medication_dosage_given, dosage: this.dosage, notes: this.notes},
...
Now the two values are posting params ^_^