So the image above is my code inside a comp.js (Vue component) when the user clicks 'Update' button, it will grab the updated input and push it to firestore.
I put v-on:emit on every single input and I tried to reference it on the 'Update' button.
This is my modal inside the HTML file, I tried to connect the function from comp.js to function.js.
However, the methods above didn't work and it gave me the error below.
I'm not really sure how to grab the value from each input and connect
UPDATED CODE BASED ON ITTUS'S SUGGESTION:
So based on the Ittuss suggestion below, I tried to pass over to items through the emit inside the Update button, I did this because I want to pass all the input values above the button to update the Firestore database.
I changed the cuisedit to this:
And I updated the function in the .js to this:
However, I received an error saying that I didn't reference correctly.
Do you know why it isn't grabbing the value emitted from the button?
In your cuiseedit component, $emit should contain only 1 additional parameter:
<button #click="$emit('some-change', obj2.id)"></button>
and in component:
<transition name="fade">
<cuisedit v-if="showModal" :obj2="cuisinemodal" #some-change="updateData">
</cuisedit>
</transition>
updateData: function (id) {
firestore.collection("koreanbap-cuisines").doc(id).update()....
}
Note
If you want to pass more data, you should wrap them to an object
<button #click="$emit('some-change', {id: obj2.id, event: $event})"></button>
Related
I'm trying to update the value in my inline edit data table from a method but I've been running into issues where the item I'm passing isn't getting updated.
I pass the props.item to my defined cancel method to be updated. The props.item.iron prop is synced so that should still be updated via edit dialog.
<template v-slot:item.iron="props">
<v-edit-dialog
:return-value.sync="props.item.iron"
large
persistent
#save="save"
#cancel="cancel(props.item)"
#open="open"
#close="close"
>
<div>{{ props.item.iron }}</div>
<template v-slot:input>
<div class="mt-4 title">Update Iron</div>
</template>
<template v-slot:input>
<v-text-field
v-model="props.item.iron"
:rules="[max25chars]"
label="Edit"
single-line
counter
autofocus
></v-text-field>
</template>
</v-edit-dialog>
</template>
I try to update the passed in obj but the change isn't reflected or passed back up to model.
cancel (item) {
console.log(item)
item.iron = 'clear'
}
Is there a way around this where I can update the prop.item externally from outside the edit dialog? My main use case is I have a request being made when a new value is saved, but I want to clear the value from the table if the request failed.
Codepen: https://codepen.io/dicquack/pen/zYxGOQx?editors=1011
Specifically line 116
EDIT:
So by taking out the .sync from the v-edit-dialog return value and changing the inner textbox from v-model to :value then I'm able to modify the value outside the edit dialog. I'm running into another issue where I now need to pass the new textbox :value to the edit dialog and pass it to save handler.
CodePen has been updated accordingly
You have to pass the updated iron value to save() along with reference to the updated object in this case let's use name (in real example use some unique id)
<v-edit-dialog
:return-value.sync="props.item.iron"
large
persistent
#save="save({name : props.item.name, props.item.iron})"
#cancel="cancel(props.item)"
#open="open"
#close="close"
>
in save() implementation , update iron field inside Data object based on name field,
save({name, iron}){
// update `iron` in Data object based on `name`
}
I have a dynamic table generated on the server-side. Each row of the table is associated with an ID. Every row has a button. My goal is simple: when the user clicks a button in a row, that particular button should change to the 'is-loading' class and an AJAX call should fire. When the AJAX call resolves, the button should change to the 'is-success' class.
I could do this easily in jQuery, but I'm trying to learn Vue.js for this project. When I try to think about this from a Vue perspective, I'm effectively saying that the state of each row is changing first to a "loading" state and then to a "success" state. So if I have a rowState object, I can change the value of rowState[rowID] to change the state of the button, and bind my button's class to the value of rowState[rowID]. For example, for row #2 of the table, my button might look like:
<button :class="[{ 'is-loading': (rowState[2] == 1) }, {'is-success': (rowState[2] == 2) }]" #click="changeRowState(2)">
Then the changeRowState method would look like:
changeRowState(rowID) {
this.rowState[rowID] = 1;
}
This works fine (i.e. it adds the 'is-loading' class to the button in row #2 when it's clicked) if I define rowState in Vue like this:
data: {
rowState: {2: 0},
}
However, it fails if I don't pre-populate rowState with a list of all the possible row IDs. If there is no 2 property when rowState is created, adding that property later does not work.
data: {
rowState: {},
}
I can't see any practical way to add a property for every row in this dynamically generated table into the initial definition. Am I missing something obvious? I'm reasonably familiar with JS but very new to Vue.
Here's a fiddle demonstrating the behavior. If you change the rowState definition to {2: 0}, it works (the button turns red when clicked). If the 2 property is not defined in data, however, it does not (the button remains unchanged).
For an object, you have to use Vue.set (or this.$set). See Reactivity In Depth from the docs.
Vue js doesn't allow you to access arrays directly. See the documentation at https://vuejs.org/2016/02/06/common-gotchas/
Instead of using
this.rowState[rowID] = newValue;
You should use
rowState.$set(rowID, newValue)
or
rowState.splice(rowID, 1, newValue).
I am trying to navigate from table component of one dashboard to another dashboard which is also having table component in pentaho CDE.I set dashboard-1 table component 1st column as hyperlink which is going to be clicked and i put some js on ClickAction menu..
JS on ClickAction
function testClick(e) {
var id = e.tableData[e.rowIdx][0];
window.location ='http://localhost:8080/pentaho/api/repos/%3Apublic%3ASU-KAM%3APR_Item.wcdf/generatedContent'+'?item_desc=' +id;
}
I am passing URL of Dashboard-2 and the parameter needs to be reflect on dashboard-2.
On Dashboard-2 i have created custom_parameter to receive parameter value from dashboard-1 which is
---> item_category=Dashboards.getQueryParameter("item_category") .
I set the parameters and listeners correctly on dashboard-2 and passed the parameter name in my chart component query.
But i didn't get any reflection on dashboard-2 when i click on dashboard-1.It's navigating to dashboard-2 but it showing empty data.
Help me guys.
THANKS,
Kannas
I'm fairly new to Ember and I'm trying to implement a Collapse method when I have clicked on a checkbox as a part of my form. This checkbox is inside a collapsed section part of a button group I have in my form.
Template.hbs
{{#bs-button onClick=(action "toggle")}}
{{#if collapsed}}
{{form.element controlType="checkbox" label="View Additional Fields" property="additionalFields"}}
{{/if}}
<div>
{{#bs-collapse collapsed=collapsed}}
{{form.element controlType="checkbox" label="Property" property="property"}}
{{form.element controlType="textarea" label="Instructions:" name="instructions" property="instructions"}}
{{/bs-collapse}}
</div>
{{/bs-button}}
Component.js
collapsed: true,
actions: {
toggle() {
let toggleValue = !get(this, 'collapsed');
set(this, 'collapsed', toggleValue);
}
}
When running ember serve and I go to my form if I click on the checkbox an error pops up in Ember Inspector:
Assertion Failed: You cannot use the form element's default onChange action for form elements if not using a model or setting the value directly on a form element.
You must add your own onChange action to the form element in this case!
Error
If I change onClick to onChange then fields aren't displayed when I click the checkbox, but I still get the error. What would be the best way to go about trying to fix this problem?
The error you are facing has nothing to do with {{bs-collapse}} or your {{bs-button}} onClick action. It seems like your {{bs-form}} does not have a model property but ember-bootstrap requires that one if you don't that an onChange action to each {{form.element}}. You find details in ember-bootstrap api docs and in source code.
So I have a modal box that allows the user to edit / save some data.
I just want to add that unlike other Meteor apps, I don't want to save the data straight away - I want the user to fill in all the fields before hitting save where it will save to the database and send to server etc. This is mainly because I want the user to be able to hit the "cancel" button to revert all changes.
I have a drop down box at the start of the form where depending on the value, fields will be shown or hidden
<select class="form-control" id="ddlNewInputType" placeholder="Enter your input type">
<option value="input">Input</option>
<option value="formula">Formula</option>
</select>
And I have a handlebar around a field like this to determine whether I want to show it
{{#if isFormula }}
<div class="row">
<input type="text"
id="txtNewInputFormula" placeholder="Enter formula">
</div>
{{/if}}
With a helper looking like this
isFormula: ->
$('#ddlNewInputType').val() == 'formula'
However, this doesn't work. Aside from when it first loads onto the page, it never hits isFormula, probably because Meteor doesn't consider any of the HTML elements as reactive so it never re-evaluates when the HTML element changes.
What is a suitable way to get around this? Is it possible to make something reactive explicitly in Meteor? I was also considering putting the dropdown list value into a session variable but that just seems messy because I'm going to need to manage this session variable (remember to clear it when the modal box closes etc.)
Your analysis is correct - a reactive variable needs to be involved in order for your helper to reevaluate after changing the select element. The basic strategy looks like:
Initialize a reactive variable when the template is created.
Whenever the select changes, update the reactive variable.
Read the reactive variable in your helper.
Rather than use a session variable, let's use a ReactiveVar scoped to your template. Here's an example set of modifications:
Template.myTemplate.helpers({
isFormula: function() {
return Template.instance().isFormula.get();
}
});
Template.myTemplate.events({
'change #ddlNewInputType': function (e, template) {
var isFormula = $(e.currentTarget).val() === 'formula';
template.isFormula.set(isFormula);
}
});
Template.myTemplate.created = function() {
// in your code, default this to the current value from
// your database rather than false
this.isFormula = new ReactiveVar(false);
};
Remember that you'll need to also do:
$ meteor add reactive-var
See my post on scoped reactivity for a full explanation of this technique.