I have a form to add new items to my array, but would like to hide the form until the user is ready to add an item. The form is hidden and I have a #click function attached to an icon to toggle the form to show, which is also working. But, as soon as the form is toggle to show, it hides automatically within a few seconds.
#click icon
<li class="m-portlet__nav-item">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon" #click="isSection ^= true">
<i class="flaticon-add"></i>
</a>
</li>
form
<div class="row" v-show="isSection">
<div class="col-md-12">
<div style="border: 1px solid #fcfcfc; padding: 1em">
<h5>Add New Section</h5>
<hr>
<form v-on:submit.prevent="addNewSection">
<div class="form-group m-form__group">
<input v-model="sections.name" placeholder="Name" class="form-control m-input" style="margin-bottom: .5rem"/>
<textarea v-model="sections.description" placeholder="Description" class="form-control m-input" style="margin-bottom: .5rem"/></textarea>
<button type="submit" class="btn btn-primary">Add Section</button>
</div>
</form>
</div>
</div>
</div>
script
new Vue({
el: "#main",
data: {
isSection: false,
...
addNewSection
addNewSection() {
this.sections.push(
{
name: this.sections.name,
description: this.sections.description,
items: []
}
);
this.sections.name = "";
this.sections.description = "";
},
By setting href="" here:
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon" #click="isSection ^= true">
you are triggering a re-load of your page when you click the link.
Try href="#".
<a href="#" class="m-portlet__nav-link m-portlet__nav-link--icon" #click="isSection ^= true">
I expect you also just want to negate isSection as mentioned in the comment above even though what you wrote does serve the same purpose; it's not a commonly used syntax.
<a href="#" class="m-portlet__nav-link m-portlet__nav-link--icon" #click="isSection = !isSection">
Related
I am trying to select a value from multiselect dropdown via Cypress and using this
cy.get(':nth-child(7) > .row > :nth-child(1)')
.select('The Watermark at Cherry Hills', { force: true })
.invoke('val')
.should('0', 'The Watermark at Cherry Hills')
and failing it. Anyone can guide me how to handle this ?
<div data-vv-name="Community 1" class="">
<div class="ui fluid search selection dropdown form-control">
<i class="dropdown icon"></i><input autocomplete="off" tabindex="0" name="" class="search">
<div data-vss-custom-attr="" class="text default">Select community/s
</div>
<div tabindex="-1" class="menu hidden" style="display: none;">
<div data-vss-custom-attr="" class="item">
The Watermark at Cherry Hills
</div>
<div data-vss-custom-attr="" class="item">
The Fountains at Albemarle
</div>
<div data-vss-custom-attr="" class="item">
The Sapphire Valley
</div>
</div>
</div>
</div>
First, you have to do a click() operation on the dropdown to expand it. Now using each() you can loop through all the elements of the dropdown, and using an if condition click the one you want to select.
cy.get('.search.selection.dropdown').click()
cy.get('div.item').each(($ele) => {
if ($ele.text() == "The Watermark at Cherry Hills") {
cy.wrap($ele).click()
}
})
I am using vue to show a photo that is being pulled from a mysql DB.
I loop through the images but when I click to show, all the images show instead of just the one that I want to show (the single image button I clicked). How do I get only one image to show up at a time?
UPDATED
<div>
<div v-for="(image, index) in images" :key="index">
<div class="dropdown">
<div>
<a class="dropdown-item preview-link" #click="togglePreview(index)">
Preview
</a>
</div>
</div>
<div v-if="currentIndex === index" class="modal-dialog modal-dialog-centered modal-md" role="image" style="max-width: 700px;">
<div class="modal-content" style="overflow: hidden;">
<div class="modal-header">
<h5 class="modal-title">{{image.title}}</h5>
<button type="button" class="close modal-close-button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img :src="'/storage/images/' + image.name + '.jpg'">
</div>
</div>
</div>
</div>
</div>
In my vue methods:
togglePreview(index) {
this.currentIndex = this.currentIndex === index?-1:index
},
Vue Data
data() {
return {
currentIndex: -1,
}
},
I use $http.delete in a VueJS project to remove the users from a page. When I click on delete icon the user is delete it from the database but on the front end the html for that user is still on page. Will disappear if I refresh the page.
This whole HTML(down) is a user from a list of users, from a database. I tried wrapping the whole HTML with another div and use inside a v-if directive, but in this case will not show me any user.
So how can I remove the html element too, when I delete the user, without refreshing the page?
If there is another way to delete a user from database, beside this $http.delete, fell free to show it to me.
HTML
<template>
<div>
<div class="card visitor-wrapper">
<div class="row">
<div class="col-md-2">
<div class="checkbox checkbox-success">
<input type="checkbox" id="select-1">
<label for="select-1" style="width: 50px;"><img src="../../assets/icons/visitors-icon.svg" alt=""></label>
</div>
<i class="fa fa-user-o fa-2x" aria-hidden="true"></i>
</div>
<div class="col-md-3">
<p class="visitor-name">{{user.firstName}}</p>
<span class="visitor-email">{{user.userType}}</span>
</div>
<div class="col-md-2">
<p class="visitor-other-detail">{{user.rid}}</p>
</div>
<div class="col-md-2">
<p class="visitor-other-detail">{{user.departmentId}}</p>
</div>
<div class="col-md-2">
<p class="visitor-other-detail">{{createdDate(user.createdDate)}}</p>
</div>
<div class="col-md-1 divider-left">
<div class="edit-icon">
<router-link :to="'/users/edit-user/'+user.rid"><a data-toggle="tooltip" data-placement="top" title="Edit Employee"><i class="ti-pencil-alt" aria-hidden="true"></i></a></router-link>
</div>
<div class="trash-icon">
<a data-toggle="tooltip" data-placement="top" title="Delete Employee" #click="removeUser(user.rid)"><i class="ti-trash" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</template>
JS
export default {
props: ['user'],
methods: {
removeUser(item) {
this.$http.delete('/user/' + item)
.then((response) => {
console.log('response', response);
});
}
}
}
Set a v-if on the element that you want to have removed.
In your data you can have an attribute like; userIsActive or something which defaults to true. If your ajax call is a success you can set it to false which will make the element disappear with the v-if.
removeUser(item) {
this.$http.delete('/user/' + item)
.then((response) => {
this.userIsActive = false;
console.log('response', response);
});
}
Of course there are dozens of variations on how to do this but this might help you out.
you can use v-html for remove html text and only show text..
<p v-html="items"></p>
I'm using Vue.js to add multiple rows, each row contain two datetimepicker inputs and a bootstrap-select.
My problem is when I fill the inputs and click to add a new row the previous ones clear out, the reason is each time I add a new row I'm using setTimeout to referesh the selectpicker and the datetimepicker.
So I want to know if there is a way to trigger the last added element them without refreshing the previous ones.
Here is my code :
HTML
<div class="cols" id="app">
<ul style="list-style-type: none;">
<li>
<button style="float: right;margin-right: 20px;margin-top: 5px;" type="button" class="btn btn-success btn-xs" v-on:click="addRow()">
<i class="fa fa-plus"></i> Ajouter
</button>
</li>
<li v-for="(row, id) in rows">
<div class="form-inline cp-out" style="padding-bottom: 9px;border-radius:4px;background-color:white;margin-left:-20px;display:inline-block;width:100%;margin-top:10px;">
<div class="col-md-3">
<label :for="['time_start'+id]" class="control-label">start time</label>
<div class="input-group date form_time" style="width:100%;" data-date="" data-date-format="hh:ii" :data-link-field="['time_start'+id]" data-link-format="hh:ii">
<input v-model="row.startTime" :name="'rows['+id+'][startTime]'" class="form-control" :id="['startTime' + id]" size="16" type="text" value="" >
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
</div>
<div class="col-md-3">
<label :for="['time_end'+id]" class="control-label" style="margin-left:7px;">end time</label>
<div class="input-group date form_time" style="width:100%;" data-date="" data-date-format="hh:ii" :data-link-field="['time_end'+id]" data-link-format="hh:ii">
<input v-model="row.endTime" :name="'rows['+id+'][endTime]'" class="form-control" :id="['endTime'+id]" size="16" type="text" value="" >
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group select_group" style="margin-left:5px;">
<label :for="['status' + id]" class="control-label">Status</label>
<select data-width="100%" v-model="row.status" :name="'rows['+id+'][status]'" :id="['status' + id]" class="select_picker" data-live-search="true" multiple >
<option value="Status 1">Status 1</option>
<option value="Status 2">Status 2</option>
</select>
</div>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn_delete btn-xs btn-danger" v-on:click="delRow(id)">
<i class="fa fa-remove"></i> delete
</button>
</div>
</div>
</li>
</ul>
</div>
JS
app = new Vue({
el: '#app',
data: {
rows: []
},
methods: {
addRow: function () {
this.rows.push({startTime: '', endTime: '', status: []});
setTimeout(function () {
$('.select_picker').selectpicker('refresh');
$('.form_time').datetimepicker({format: 'LT'});
}.bind(this), 10);
},
delRow: function (id) {
this.rows.splice(id, 1);
}
},created:function() {
this.addRow();
}
});
This is the example : https://jsfiddle.net/rypLz1qg/9/
You really need to write a wrapper component. Vue expects to control the DOM and not to have you making DOM-changing things like the *picker calls at arbitrary times. However, a component gives you the opportunity to tell your component how to interact with the DOM in each of its lifecycle hooks so that its behavior can be consistent. See the JavaScript tab on the wrapper component example page.
I am having issues making the text area fill the width of the panel any ideas??
My code is below
<div class="panel panel-primary">
<div id="div_EssentialInformation" class="panel-heading">Essential information</div>
<div id="content" style="display:none;">
<div class="panel-body">
<textarea class="form-control" rows="3" style="resize:none;"></textarea>
</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<a id="btn_edit" class="btn btn-primary">Edit</a>
<a id="btn_save" class="btn btn-danger" style="display:none">Save</a>
</div>
</div>
</div>
</div>
i have a script that toggles the display of the content div, below is the js script
$("#div_EssentialInformation").click(function () {
$("#content").slideToggle(500);
})
I am getting this
Add this to your css
textarea {
width: 100% !important;
}