Using vue v2.5 with vueCLI 3 trying to have a v-data-table that on each row have a button, when this button clicked should make it appear as loading.
v-btn has loading property by default, really I don't know why is not working...
<v-data-table
:headers="headers"
:items="records"
#dblclick:row="editRowCron_jobs">
<template v-slot:[`item.actions`]="props">
<v-btn color="blue-grey" :loading="props.item.createloading" fab dark small #click="ManuralRun(props.item)">
<v-icon dark>mdi-google-play</v-icon>
</v-btn>
</template>
</v-data-table>
On the click method, I can read but not set the item
export default {
data() {
return {
headers: [
{ text: "id", value: "id", align: " d-none" },
{ text: "actions", value: "actions" }
],
records: [] //grid rows filled by API
}
},
methods: {
ManuralRun(item){
this.records[2].createloading=true; //even I set it like that, nothing happens
item.createloading = true; //property changed here - ok
console.log(item); //here outputs the clicked item - ok
},
so, according to this
the property MUST pre-exist in the array, that means, when we get the result from the API, we have to add the property as:
this.records = data.data.map(record => {
return {
createloading: false,
...record
}
})
Related
VueCompilerError: v-model cannot be used on v-for or v-slot scope variables because they are not writable. Why?
<template>
<div v-for="service in services" :key="service.id">
<ServicesItem v-model="service"></ServicesItem >
</div>
</template>
<script lang="ts">
import ServicesItem from "#js/components/ServicesItem.vue"
export default defineComponent({
components: { ServicesItem },
setup() {
const services = ref([
{
id: 1,
name: "Service 1",
active: false,
types_cars: {
cars: {},
suv: {},
},
},
])
return {
services,
}
},
})
</script>
What are the best practices? Reactive object transfers
Okay, so what's going on is that the variable "service" is, let's say, virtual.
It doesn't exist, it's just a part of your real object "services" at a certain point (iteration).
If you'd like to "attach" that iteration to your component, you need to provide a real object, and in your case that would be done like that:
<div v-for="(service, i) in services" :key="service.id">
<ServicesItem v-model="services[i]"></ServicesItem >
</div>
Same issue here, i've change the modelValue props by an other custom props, and it works fine for me.
old:
const props = defineProps({
modelValue: {
type: Object,
required: true
}
})
NEW:
const props = defineProps({
field: {
type: Object,
required: true
}
})
Component:
<MyComponent :field="service"/>
instead of
<MyComponent :v-model="service"/>
I have a custom datepicker calendar I want to show for editing dates in tabulator. I have managed to open the calendar when the row cell is click by providing a custom editor.
The problem is that as soon as I click on my calendar, (what I think happens) is that Tabulator´s "As a fallback Tabulator will cancel the edit if an editor is blured and the event has not been correctly handled." behavior triggers before I can process the click on my calendar and update the cell value.
Is there a way to allow the user to click on the calendar without making tabulator cancel the edit?
Don't know which custom date picker you are using but here is a working example using flatpickr:
let initialTableData = [{
eventName: "Christmas party",
eventDate: "12-25-2021"
},
{
eventName: "New Years party",
eventDate: "12-31-2021"
}
]
function dateEditor(cell, onRendered, success, cancel, editorParams) {
let editor = document.createElement("input")
editor.value = cell.getValue()
let datepicker = flatpickr(editor, {
dateFormat: "m-d-Y",
onChange: setDate,
onClose: setDate
})
function setDate(selectedDates, dateStr, instance) {
success(dateStr)
instance.destroy()
}
onRendered(() => {
editor.focus()
})
return editor
}
let eventTable = new Tabulator("#eventTable", {
data: initialTableData,
columns: [{
title: "Event",
field: "eventName",
width: 200
},
{
title: "Event Date",
field: "eventDate",
editor: dateEditor
}
]
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.7/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.7/css/tabulator.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<div id="eventTable"></div>
Here is the CodePen
Hello I am working on a process with React that will allow users to select a row or rows from a table by selecting check-boxes.
I need assistance with how once a row is checked, how can I store this information but at the same time if the row is unchecked I would also want to update the state.
Than when the user selects the submit button it will send the array object to the server side.
I have an empty array in my state and in the method that handles selecting a checkbox I am attempting to push the data to the array and than send the array with a form.
It appears as if the array is not being updated or I am missing something?
class TestStatus extends Component {
constructor (props) {
super(props)
this.state = {
selected: []
}
handleCheckChildeElement = (event) => {
var data = this.global.data;
data.forEach(data => {
if(data.testid === event.target.value) {
data.isChecked = event.target.checked
if(event.target.checked === true) {
this.setState({ selected: [ ...this.state.selected, data]
});
}
console.log(this.state.selected);
}
});
this.setGlobal({ data });
}
handleSubmit(event) {
event.preventDefault();
axios.post('http://localhost:5000/api/advanced_cleanup',
this.state.selected)
.then((res) => {
console.log("Sending tests");
}).catch(event => console.log(event));
}
render() {
return(
<div>
<table>
<AdvancedRows checked={this.handleCheckChildeElement}
handleCheckChildeElement={this.handleCheckChildeElement}/>
</table>
<form className="ui form" onSubmit={this.handleSubmit}>
<button
className="ui basic blue button" type="submit"
style={{ marginBottom: '5em' }}>
Submit
</button>
</form>
</div>
);
}
}
I expect to be able to select a checkbox or multiple and update the state array based on what is checked and than send that data to the server side.
After some additional research online I found the correct way with react to update the state array and than update it upon unchecking a check box.
If the targeted row is checked it will pass that rows object into the state array otherwise if the check box of the row is unchecked it will iterate over the state array and filter out the item that was unchecked.
This is the guide I used to assist me. https://scriptverse.academy/tutorials/reactjs-update-array-state.html
if(event.target.checked === true) {
this.setState({ selected: [...this.state.selected, data ] });
} else {
let remove = this.state.selected.map(function(item) {
return item.testid}).indexOf(event.target.value);
this.setState({ selected: this.state.selected.filter((_, i) => i !== remove) }); }
Expanding on my comment above.
handleCheckChildeElement = (event) => {
var data = this.global.data;
// create an empty array so that each click will clean/update your state
var checkedData = [];
data.forEach(data => {
if(data.testid === event.target.value) {
data.isChecked = event.target.checked
if(event.target.checked === true) {
// instead of setting your state here, push to your array
checkedData.push(data);
}
console.log(checkedData);
}
});
// setState with updated checked values
this.setState({selected: checkedData});
this.setGlobal({ data });
}
I am new to using backbone in parse.com environment. I simply want to edit the second model object but I dont know how to open the edit box for the second object.
The current working model is the following, I have added "dblclick label.todo-job" : "edit1" and can get it started by double clicking it.
events: {
"click .toggle" : "toggleDone",
"dblclick label.todo-content" : "edit",
"dblclick label.todo-job" : "edit1",
"click .todo-destroy" : "clear",
"keypress .edit" : "updateOnEnter",
"blur .edit" : "close"
},
The following is the function to allow editing my object.
edit1: function() {
$(this.el).addClass("editing");
this.input.focus();
},
However, it only opens this object "label.todo-content" to edit while I want to edit "label.todo-job". How can I change the focus to the new object.
Thats the whole code if you need.
// The DOM element for a todo item...
var TodoView = Parse.View.extend({
//... is a list tag.
tagName: "li",
// Cache the template function for a single item.
template: _.template($('#item-template').html()),
// The DOM events specific to an item.
events: {
"click .toggle" : "toggleDone",
"dblclick label.todo-content" : "edit",
"dblclick label.todo-job" : "edit1",
"dblclick label.todo-phone" : "edit2",
"dblclick label.todo-email" : "edit3",
"dblclick label.todo-website" : "edit4",
"dblclick label.todo-address" : "edit5",
"click .todo-destroy" : "clear",
"keypress .edit" : "updateOnEnter",
"blur .edit" : "close"
},
// The TodoView listens for changes to its model, re-rendering. Since there's
// a one-to-one correspondence between a Todo and a TodoView in this
// app, we set a direct reference on the model for convenience.
initialize: function() {
_.bindAll(this, 'render', 'close', 'remove');
this.model.bind('change', this.render);
this.model.bind('destroy', this.remove);
},
// Re-render the contents of the todo item.
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
this.input = this.$('.edit');
return this;
},
// Toggle the `"done"` state of the model.
toggleDone: function() {
this.model.toggle();
},
// Switch this view into `"editing"` mode, displaying the input field.
edit: function() {
$(this.el).addClass("editing");
this.input.focus();
},
edit1: function() {
$(this.el).addClass("editing");
this.input.focus();
},
edit2: function() {
$(this.el).addClass("editing");
this.input.focus();
},
edit3: function() {
$(this.el).addClass("editing");
this.input.focus();
},
edit4: function() {
$(this.el).addClass("editing");
this.input.focus();
},
edit5: function() {
$(this.el).addClass("editing");
this.input.focus();
},
// Close the `"editing"` mode, saving changes to the todo.
close: function() {
this.model.save({content: this.input.val()});
$(this.el).removeClass("editing");
},
// If you hit `enter`, we're through editing the item.
updateOnEnter: function(e) {
if (e.keyCode == 13) this.close();
},
// Remove the item, destroy the model.
clear: function() {
this.model.destroy();
}
});
Below is the objects added in the HTML.
<script type="text/template" id="item-template">
<li class="<%= done ? 'completed' : '' %>">
<div class="view">
<li><label class="todo-content"><%= _.escape(content) %></label></li>
<li><label class="todo-job"><%= _.escape(job) %></label></li>
<li><label class="todo-phone"><%= _.escape(phone) %></label></li>
<li><label class="todo-email"><%= _.escape(email) %></label></li>
<li><label class="todo-website"><%= _.escape(web) %></label></li>
<li><label class="todo-address"><%= _.escape(address) %></label></li>
<li><label class="todo-postcode"><%= _.escape(postcode) %></label></li>
<button class="todo-destroy"></button>
</div>
<input class="edit" value="<%= _.escape(content) %>">
<input class="edit" value="<%= _.escape(content) %>"> /*I need to edit this instead of the object above this*/
</li>
</script>
An event triggers on the deepest possible element.which means this of Event handler function is not element you select for event listener but element where the actual event occurs.
I don't know about parse.com though,I assume that label.todo-content is inside of label.todo-job. And that makes Event handler's callback this into label.todo-content.
So If you explicitly select element to focus,It should work.
FYI, Backbone View has $(http://backbonejs.org/#View-dollar) and $el (http://backbonejs.org/#View-$el) parameters to use jQuery methods for elements in side of the View.Since global $ is able to edit any elements over each controller's View area, using this.$ is always recommended.
edit1: function() {
this.$el.addClass("editing");
this.$("label.todo-job").focus();
},
EDITED
I got what you asked about.
I do not know how you wrote your HTML code but the code you provided is pointing first input if your input tags have class name,
edit1: function() {
this.$el.addClass("editing");
this.$(".yourClassNameForInput").focus();
},
or if you do know have class/id name,You can also do this.
edit1: function() {
this.$el.addClass("editing");
this.$("input").eq(0).focus();
},
....
edit5: function() {
this.$el.addClass("editing");
this.$("label.todo-job").eq(4).focus();
}
I am using ZingChart for a standard bar graph. I have the selected state for individual bars working as I would like but for one thing. Is there a way to show the value box (set to visible:false globally) to show just for the selected node when it is clicked/selected? I was able to make the value box for every node show in a click event I added to call an outside function using the modifyplot method but I don't see a similar method for nodes such as modifynode. If this is not an option, is there any way to insert a "fake" value box the markup of which would be created on the fly during the click event and have that element show above the selected node? Below is my render code for the chart in question. Thanks for your time!
zingchart.render({
id: "vsSelfChartDiv",
width: '100%',
height: '100%',
output: 'svg',
data: myChartVsSelf,
events:{
node_click:function(p){
zingchart.exec('vsSelfChartDiv', 'modifyplot', {
graphid : 0,
plotindex : p.plotindex,
nodeindex : p.nodeindex,
data : {
"value-box":{
"visible":true
}
}
});
var indexThis = p.nodeindex;
var indexDateVal = $('#vsSelfChartDiv-graph-id0-scale_x-item_'+indexThis).find('tspan').html();
updateTop(indexDateVal);
}
}
});
You'd probably be better off using a label instead of a value-box. I've put together a demo here.
I'm on the ZingChart team. Feel free to hit me up if you have any more questions.
// Set up your data
var myChart = {
"type":"line",
"title":{
"text":"Average Metric"
},
// The label below will be your 'value-box'
"labels":[
{
// This id allows you to access it via the API
"id":"label1",
"text":"",
// The hook describes where it attaches
"hook":"node:plot=0;index=2",
"border-width":1,
"background-color":"white",
"callout":1,
"offset-y":"-30%",
// Hide it to start
"visible":false,
"font-size":"14px",
"padding":"5px"
}
],
// Tooltips are turned off so we don't have
// hover info boxes and click info boxes
"tooltip":{
"visible":false
},
"series":[
{
"values":[69,68,54,48,70,74,98,70,72,68,49,69]
}
]
};
// Render the chart
zingchart.render({
id:"myChart",
data:myChart
});
// Bind your events
// Shows label and sets it to the plotindex and nodeindex
// of the clicked node
zingchart.bind("myChart","node_click",function(p){
zingchart.exec("myChart","updateobject", {
"type":"label",
"data":{
"id":"label1",
"text":p.value,
"hook":"node:plot="+p.plotindex+";index="+p.nodeindex,
"visible":true
}
});
});
// Hides callout label when click is not on a node
zingchart.bind("myChart","click",function(p){
if (p.target != 'node') {
zingchart.exec("myChart","updateobject", {
"type":"label",
"data":{
"id":"label1",
"visible":false
}
});
}
});
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<div id="myChart" style="width:100%;height:300px;"></div>