Noob question but I can get fields to render in Vue but not sure how to delete my fields. I added an index option in the v-for directives but not sure what to do after that. Thanks!
Here is a working JSFiddle: https://jsfiddle.net/xu55npkn/
<body>
<div id="app"></div>
<script>
const createNewOption = () => {
return {
text: '',
isAnswer: false
}
}
const createNewQuestion = () => {
return {
text: '',
options: [createNewOption()]
}
}
var vm = new Vue({
el: '#app',
template: `<div class="quiz-builder container">
<div v-for="question in questions">
<div class="input-group">
<input type="text" class="form-control" v-model="question.text" placeholder="Enter a question">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">X</button>
</span>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" #click="addOption(question)">Add an option</button>
</span>
</div>
</br>
<div class="input-group" v-for="(option, index) in question.options" style="margin-bottom: 20px">
<span class="input-group-addon">
<input type="checkbox" v-model="option.isAnswer">
</span>
<input type="text" class="form-control" v-model="option.text" placeholder="Enter an option">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">X</button>
</span>
</div></br>
</div>
<button class="btn btn-default" #click="addQuestion" :disabled="questions.length >= 5 ? true : false">
Add another question
</button>
<button class="btn btn-primary" style="background-color: #ffcc00; border: #ffcc00">
Create quiz
</button>
</div>`,
data () {
return {
questions: [createNewQuestion()],
showQuestions: false,
}
},
methods: {
addQuestion () {
this.questions.push(createNewQuestion())
},
removeQuestion (index) {
this.questions.shift(index)
},
addOption (question) {
question.options.push(createNewOption())
}
}
})
</script>
Based on your updated question, you have already solved for removing questions, although yev's answer is a much better way for removing questions.
To remove options, you need to add a new handler for removeOption that takes in both the question (which you are iterating over) and the option (which you are iterating over. Vue handles both of these scenarios for you. You can then find the index of the option and splice the array. See this fiddle.
template:
<button class="btn btn-danger" type="button" #click="removeOption(question, option)">
X
</button>
component:
removeOption (question, option) {
var index = question.options.indexOf(option);
if (index > -1) {
question.options.splice(index, 1);
}
}
Your delete button should look like:
<div v-for="(question, i) in questions">
<div>
<input v-model="question.text">
<span>
<button #click=removeQuestion(i)>X</button>
</span>
<span>
<button #click="addOption(question)">Add an option</button>
</span>
</div>
</div>
Notice I've added i (index) in your for loop and click handler for X button.
Your remove function will look like:
removeQuestion (index) {
this.questions.splice(index, 1);
}
Array.shift will remove only first item in the array which is not exactly what you want :)
Related
So here is my code. When I press the button with mouse it reloads page but, when I press enter key its not refreshing. Any ideas how to do it?
<template lang="html">
<div class="chat-composer">
<input maxlength="180" type="text" placeholder="mesajınızı yazınız" v-model="messageText" #keyup.enter="sendMessage">i
<button class="btn btn-primary" #click="sendMessage" onClick="window.location.reload();>Gönder</button>
</div>
</template>
here is full the code I use. So im not the expert.. I need help about it
<template lang="html">
<div class="chat-composer">
<input maxlength="180" type="text" placeholder="mesajınızı yazınız" v-model="messageText"
#keyup.enter="sendMessage">
<button class="btn btn-primary" #click="sendMessage" onClick="window.location.reload();"
>Gönder</button>
</div>
</template>
<script>
export default {
data() {
return {
messageText: ''
}
},
methods: {
sendMessage(){
this.$emit('messagesent',{
message: this.messageText,
user: {
name: $('.navbar-right .dropdown-toggle').text()
}
});
this.messageText = '';
},
},
}
</script>
You are using Vue.js, if so you can do something like this
<button class="btn btn-primary" v-on:keyup.enter="window.location.reload()"
#click="sendMessage" onClick="window.location.reload();>Gönder</button>
You can check the Key Modifiers here the https://v2.vuejs.org/v2/guide/events.html
I am trying to toggle a span containing a loading animation on a button press until the function completes using v-if. But when I press the button the DOM freezes and the span element is unchanged until the function call ends. How can I make the DOM not freeze and the loading icon to show? Non blocking button press might be a solution?
HTML
<form class="form-inline">
<div class="form-group">
<div style="display: inline-flex" class='input-group date' id='datetimepicker1'>
<input placeholder="Start Date" id="pick1" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<div style="display: inline-flex" class='input-group date' id='datetimepicker2'>
<input placeholder="End Date" id="pick2" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<input class="form-control" type="text" v-model="Keyword" placeholder="keyword">
</div>
#*Start Date<input type="text" v-model="StartDate" placeholder="Start Date" style="width: 177px" />
End Date <input type="text" v-model="EndDate" placeholder="End Date" style="width: 177px" />*#
<button type="button" v-show="resetShow" class="btn btn-primary btn-lg " v-on:click="reset" id="reset-btn">Reset filters</button>
<button type="button" v-show="GetShow" type="button" class="btn btn-primary btn-lg " v-on:click="getEdges">Get Edges</button>
<button v-show="GetShow" type="button" class="btn btn-primary btn-lg " v-on:click="getNodes">Get Nodes</button>
<button v-on:click="send" type="button" class="btn btn-default" id="load" >Submit</button>
<span v-if="loading" id="loader" style="display:none"> <i style="font-size: 197%; color: purple" class='fa fa-circle-o-notch fa-spin'></i> <span style="font-size: 190%"> Processing </span> </span>
Javascript
var vm = new Vue({
el: '#main',
data: {
resetShow: false,
Keyword: '',
StartDate: '2016-06-08T17:03:36.000Z',
EndDate: '2016-06-16T17:03:36.000Z',
Dialog: [],
EdgeList: [],
NodeList: [],
loading: false,
StartDate1: '',
GetShow: false
},
// define methods under the `methods` object
methods: {
getById: function(event) {
},
send: function(event) {
this.loading = true;
console.log(this.StartDate1);
var StartDate = $('#datetimepicker1').data("DateTimePicker").date().utc().format().split('+')[0]+".000Z";
var EndDate = $('#datetimepicker2').data("DateTimePicker").date().utc().format().split('+')[0]+".000Z";
if (this.Keyword != null) {
var g = GetElasticSearch(this.Keyword, StartDate, EndDate);
s.graph.clear();
s.graph.read(g);
sigma.canvas.edges.autoCurve(s);
s.refresh();
// Start the ForceLink algorithm:
sigma.layouts.startForceLink();
//Louv
var louvainInstance = sigma.plugins.louvain(s.graph,
{
setter: function(communityId) { this.my_community = communityId; }
});
var nbLevels = louvainInstance.countLevels();
console.log(nbLevels);
var partitions = louvainInstance.getPartitions();
var nbPartitions = louvainInstance.countPartitions(partitions);
// Color nodes based on their community
s.graph.nodes()
.forEach(function(node) {
//console.log(node.my_community);
node.color = colors[node.my_community];
});
s.refresh({ skipIndexation: true });
s.graph.nodes()
.forEach(function(node) {
node.color = colors[node.my_community];
});
s.refresh({ skipIndexation: true });
this.loading = true;
}
}
}
});
Vue updates the DOM asynchronously, when the method is finished, so to speak.
So you have to make the part of the function that takes a long tim async, so it does not block the event loop.
You can use setTimeout(callback, 0) to run the function async.
Example: https://jsfiddle.net/Linusborg/tn8q4sub/
(Edit: The example does not always work for me though I don't quite get why that is - give it a try with your situation)
For your code, this should look something like this:
send: function(event) {
this.loading = true;
setTimeout(function () {
//rest of the send code.
// and at the end:
this.loading = false
}.bind(this),0) // the `bind(this)` is important!
}
currently when the page loads the defualt value of 10 displays which is what I want like so:
the custom amount shows:
but if I type something in the custom area and then delete it no default value is displayed. As shown here:
How can I get 10 to show up even if the user deletes their custom amount. I basically want 10 to always show if the user doesn't enter an amount or click a another button
here is my js:
$(document).ready(function() {
$('#donation-amount').keyup(function() {
$('#display-amount').text($(this).val());
});
$( ".selectvalue" ).click(function() {
$('#display-amount').text($(this).val());
});
$(".buttons .btn").click(function(){
$(".buttons .btn").removeClass('active');
$(this).toggleClass('active');
});
$('#display-amount').text($('#default').val());
});
and my html:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="10">10</button>
<button type="button" class="btn btn-default selectvalue hover-color" value="15">15</button>
<button type="button" class="btn btn-default selectvalue hover-color" value="20">20</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
any help would be appreciated!
You can do this
store default in global and then apply when value is empty.
var defaultValue = 10;
$('#donation-amount').keyup(function() {
if($(this).val()) {
$('#display-amount').text($(this).val());
} else {
$('#display-amount').text(defaultValue );
}
});
See in action here http://jsbin.com/guxukodace/edit?html,js,output
I'm having trouble in wanting to create multiples of the same html that I render in a certain class. For example, I have a div that might look like this
[Header goes here, is a input field] [Dropdown]
[TextArea]
[Submit]
[Add another field]
On add another field, I would like to clone this view and be able to add as many again.
Here's what I have so far:
var UpdateForm = React.createClass({
handleSubmit : function(e) {
e.preventDefault();
var title = React.findDOMNode(this.refs.title).value.trim();
var date = React.findDOMNode(this.refs.date).value.trim();
var body = React.findDOMNode(this.refs.body).value.trim();
if(!title||!date || !body ) {
return;
}
this.props.onSubmit({title:title, date : date, body : body});
React.findDOMNode(this.refs.title).value = '';
React.findDOMNode(this.refs.date).value = '';
React.findDOMNode(this.refs.body).value = '';
//React.findDOMNode(this.refs.sub).value = '';
},
render: function() {
return(
<div id = "This is what I want to duplicate on each button click">
<form className="form-horizontal" onSubmit={this.handleSubmit}>
<div class="form-control">
<label className="col-sm-0 control-label ">Title:</label>
<div class="col-sm-5">
<input className = "form-control" type = "text" placeholder="Title...." ref = "title"/>
</div>
</div>
<div class="form-control">
<label className="col-sm-0 control-label ">Date:</label>
<div class="col-sm-5">
<input className = "form-control" type = "text" placeholder="Date...." ref = "date"/>
</div>
</div>
<div className="form">
<label htmlFor="body" className="col-sm-0 control-label">Report Body:</label>
<div className="column">
<textarea className = "ckeditor" id = "ckedit" ref = "body"></textarea>
</div>
</div>
<div class="form-group">
<label className="col-sm-0 control-label"></label>
<div class="col-sm-5">
<input type = "submit" value="Save Changes" className = "btn btn-primary" />
</div>
</div>
</form>
<div className="btn-group">
<button type="button" className="btn btn-danger">Assign to</button>
<button type="button" className="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span className="caret"></span>
<span className="sr-only">Toggle Dropdown</span>
</button>
<ul className="dropdown-menu">
{
this.props.forms.map(function(form){
return (
<li>{form}</li>
)})}
</ul>
<button className="btn btn-success btn-block" onClick={this.addInputField}>Add Subform</button>
</div>
</div>
);
}
});
What I think I need to add:
addDiv: function(e) {
e.preventDefault();
//have a array of divs?
//push a the same div into it?
//then set state of that array?
}
I know in jquery I could just write a function that appends this markup whenever I hit a button, but i don't know how to think about it here at all.
I think what you want is to have a button which add another header-date-body-Component to the form, which should then also be submitted, right?
If so then you need to think more in components. Have one Component which handles the form. Have one around that which handles adding other forms.
<ReportDialog>
<ReportForm>
<ReportForm>
<button onClick={this.addReport}>Add another</button>
</ReportDialog>
To accomplish the multiple ReportForms you need to think about the data in your component, which are reports (I assume). So you need a state in ReportDialog which keeps track of your reports. so at the start of the app you have one report:
getInitialState: function () {
return {
reports: [{ title: '', body: '', date: new Date() }]
};
}
So in addReport you then need to change the state and add another report. To have these reports rendered you already used map, but this time you need to loop over the reports in your component and return a ReportForm for each report.
I am working with the following objects/structure: Course, SubCategory, SubUniversity, Category, SubCategory, CourseSchedule.
A course can have one and only one subcategory, but can be a part of many subuniversities (hence the CourseSchedule object with one Course and one SubUniversity).
Each SubCategory has one parent Category; each SubUniversity has one parent University.
I have a courseadd view and a courseedit view. Once the Course object is created with the courseadd view, SubUniversities (via CourseSchedules) can be added on the courseedit view.
When I try to add SubUniversites, the first appears twice.
When I add subsequent SubUniversites, they appear correctly with the first still being duplicated.
Here is the View Code
<section id="course-edit" class="view">
<h3 class="page-title" data-bind="text: title"></h3>
<div class="button-bar">
<button class="btn btn-info"
data-bind="click: goBack"><i class="icon-hand-left"></i></button>
<button class="btn btn-info"
data-bind="click: cancel, enable: canSave"><i class="icon-undo"></i> Cancel</button>
<button class="btn btn-info"
data-bind="click: save, enable: canSave"><i class="icon-save"></i> Save</button>
<button class="btn btn-danger"
data-bind="click: deleteCourse, disable: hasChanges">
<i class="icon-trash"></i> Delete
</button>
<i class="icon-asterisk" data-bind="visible: hasChanges"></i>
</div>
<div data-bind="with: course">
<div>
<label for="courseName">Name</label>
<input id="courseName" data-bind="value: courseName" placeholder="Course Name" />
</div>
<div>
<label for="category">Category</label>
<select id="category" data-bind="options: $parent.subcategories, optionsText: 'subCategoryName', value: subCategory"></select>
</div>
<div>
<label for="courseMaterialURL">Material URL</label>
<input id="courseMaterialURL" data-bind="value: courseMaterialURL" placeholder="http://" />
</div>
<div>
<label for="courseImageURL">Image URL</label>
<input id="courseImageURL" data-bind="value: courseImageURL" placeholder="http://" />
</div>
<div>
<label for="courseDescription">Description</label>
<textarea id="courseDescription" data-bind="value: courseDescription" placeholder="Course Description" rows="4"></textarea>
</div>
<div style="width:600px">
<div style="float:right">
<label for="courseUniversity"> </label>
<section id="courseScheduleNode" class="view-list" data-bind="foreach: courseSchedules" >
<article>
<div>
<span style="margin-right: 10px" data-bind="text: subUniversity().subUniversityName"></span>
<button class="btn btn-danger" data-bind="click: $root.removeSubUniversity" style="float:right"><i class="icon-remove"></i></button>
</div>
<br />
</article>
</section>
</div>
<div>
<label for="courseUniversity">Add University</label>
<select id="courseUniversity" data-bind="options: $parent.subuniversities, optionsText: 'subUniversityName', value: selectedSubUniversity, optionsCaption: ' '"></select>
<button class="btn btn-success" data-bind="click: $parent.addSubUniversity"><i class="icon-ok"></i></button>
</div>
</div>
</div>
</section>
This part of the viewmodel is the code for the add and remove onClick functions.
var addSubUniversity = function (selectedCourse) {
if (selectedCourse) {
var cs = datacontext.createCourseSchedule();
cs.courseId(selectedCourse.id());
cs.subUniversityId(selectedCourse.selectedSubUniversity().id());
selectedCourse.courseSchedules.push(cs);
save();
}
};
var removeSubUniversity = function (selectedCourseSchedule) {
if (selectedCourseSchedule) {
selectedCourseSchedule.entityAspect.setDeleted();
save().then(success).fail(failed).fin(finish);
function success() {
inflateCourseSchedules();
}
function failed(error) {
cancel();
var errorMsg = 'Error: ' + error.message;
logger.logError(errorMsg, error, system.getModuleId(vm), true);
}
function finish() {
}
}
};
The data is correct in the database, so this appears to be a knockout binding issue. What would cause the first value to bind twice?
Below is the key code. If subuniversity hides deleted rows. With subuniversity resolves the duplicate issue. The problem was caused by calling subuniversity().subuniversityname. The () broke the relationship between the bound item and the displayed item. When save was called the id was changed causing knockout to think it was a new item and bind it again causing the displayed collection to get out of sync with the databound collection.
<!-- ko if: subUniversity -->
<article>
<div>
<!-- ko with: subUniversity -->
<span style="margin-right: 10px" data-bind="text: subUniversityName"></span>
<!-- /ko -->
<button class="btn btn-danger" data-bind="click: $root.removeSubUniversity" style="float:right"><i class="icon-remove"></i></button>
</div>
<br />
</article>
<!-- /ko -->
Below is some more useful code. The add function adds the item to the collection waiting for save to be called. Since you have the cancel button it seems like it would be good if it was honored. The delete function cancels the add if the item was added in this context. Otherwise it sets it as deleted. Thanks to the if statement in the markup deleted items disappear from the list.
var addSubUniversity = function (selectedCourse) {
if (selectedCourse) {
var cs = datacontext.createCourseSchedule();
cs.courseId(selectedCourse.id());
cs.subUniversityId(selectedCourse.selectedSubUniversity().id());
selectedCourse.courseSchedules.push(cs);
}
};
var removeSubUniversity = function (selectedCourseSchedule) {
if (selectedCourseSchedule) {
if (selectedCourseSchedule.entityAspect.entityState.isAdded()) {
selectedCourseSchedule.entityAspect.rejectChanges();
course().courseSchedules.remove(selectedCourseSchedule);
}
else
{
selectedCourseSchedule.entityAspect.setDeleted();
}
}
};