I am trying to the the follwoing comonent with radio buttons
<template>
<form id="contactForm" #submit="sendMessage()">
<v-radio-group row :mandatory="false" :model="gender" data-vv-name="gender" v-validate="'required'" name="gender">
<v-radio #click='changeGender("f")' :label='genderLabel("f")' :value="f"></v-radio>
<v-radio #click='changeGender("m")' :label='genderLabel("m")' :value="m"></v-radio>
</v-radio-group>
...
</form>
</template>
<script>
export default {
name: "contactForm",
data() {
return {
gender: "f"
};
},
...
methods: {
...
changeGender: function(value) {
console.log("gender changed to: ", value);
this.gender = value;
}
...
</script>
Test
const radioInput = wrapper.findAll('input[type="radio"]');
radioInput.at(1).setChecked(); // input element value is changed, v-model is not
radioInput.at(1).trigger('click') // v-model updated
but I get an error... click on the second radio button [] does not change the value..
where am I wrong ? is 'click' ok or shoudl I sue another trigger ? ( change?)
thanks for feedback
you mean Something like this simply setting v-model
<v-radio-group v-model="boolean" row class="ma-2">
<v-radio label="Yes" value="Yes"></v-radio>
<v-radio label="No" value="No"></v-radio>
</v-radio-group>
Related
I would like to display the contents of the first menu item, without clicking on it, making it the default contents displayed when the app is opened. I have tried everything I can think of. Console.log shows the value of the "selectedView" observable to be something like "View {title: "Event List", templateName: "EventList"}" so I've tried setting it to this value but it still does work.
<div class="inServMenu" data-bind="foreach: views">
</div>
<div data-bind="with: selectedView">
<div data-bind="template: { name: templateName }"></div>
</div>
<script id="EventList" type="text/html">
<span>"Here's the Event List..."</span>
</script>
<script id="RosterList" type="text/html">
<span>"Here's the Roster List..."</span>
</script> var View = function (title, templateName) {
this.title = title;
this.templateName = templateName;
};
// VIEWMODEL
var viewModel = {
selectedView: ko.observable(),
views: ko.observableArray([
new View('Event List', 'EventList'),
new View('Roster List', 'RosterList')
]),
}
ko.applyBindings(viewModel);```
[Here's a jsfiddle][1]
[1]: http://jsfiddle.net/jjfrick/hmfubkcr/18/
You'd need to slightly change your viewmodel constructor so that you can have a reference to it:
function ViewModel () {
var vm = this;
vm.views = ko.observableArray([
new View('Event List', 'EventList'),
new View('Roster List', 'RosterList')
]);
vm.selectedView = ko.observable(vm.views()[0])
}
ko.applyBindings(new ViewModel());
I have a Livewire component where I have a select form field.
I want the field to a) be bound to the model, and b) have another HTML field show when the value changes.
I want to use a combination of Livewire for model binding and Alpine.js to react to field changes.
<div
x-data="{ isExtraData : false, display_type : '' }"
x-init="$watch('display_type', () => { isExtraData = display_type != 'text_field' })"
>
I can either have the proper value set on the HTML element, OR I can have the interactivity when I change the value in the drop down, but if I have both (as below) then the value isn't bound to the select field.
<select id="display_type" class="form-control mr-2" style="width:auto" wire:model="display_type" x-model="display_type" required>
use sample :
livewire:
class Dropdown extends Component
{
public $showDropdown = false;
public function archive()
{
...
$this->showDropdown = false;
}
public function delete()
{
...
$this->showDropdown = false;
}
}
template :
<div x-data="{ open: #entangle('showDropdown') }">
<button #click="open = true">Show More...</button>
<ul x-show="open" #click.outside="open = false">
<li><button wire:click="archive">Archive</button></li>
<li><button wire:click="delete">Delete</button></li>
</ul>
</div>
more :
enter link description here
I would like a reload.location click-event only if a checkbox is checked. To me this seems to be basic conditions, but it's not working. Perhaps a different approach is needed? What I figured out, is when the checkbox is ticked, there is no html change in the <input type="checkbox"> element. Maybe this is the reason or is the combination of these conditions not possible? The else statement is a call back to the previous UI page. In below attempt, it's skipping the if-statement.
My attempt:
$(document.body).on("click", "#button", function(){
if (document.getElementById('checkbox').checked) {
location.reload(true);
} else {
return_to_page( this.dataset.return )
}
});
Above is working, however it's ignored due to the missing preventDefault:
$(document.body).on("click", "#button", function(e){
e.preventDefault();
//etc
});
checked is not a property of a jQuery object. You can use prop() to get the property instead:
$('#button').click( function() {
if ($('#checkbox').prop('checked')) {
location.reload(true);
}
// alternative #1 - use the 'checked' property of the Element in the jQuery object:
if ($('#checkbox')[0].checked) {
location.reload(true);
}
// alternative #2 - use the 'checked' property of the Element outside of jQuery:
if (document.getElementById('checkbox').checked) {
location.reload(true);
}
});
Here's a working example:
$('#button').click(function() {
if ($('#checkbox').prop('checked')) {
// location.reload(true);
console.log('Reload would happen now...');
} else {
console.log('Staying on the current page');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkbox" />
Reload?
</label>
<button id="button">Go</button>
$('#button').click( function() {
if( $("input[id='checkbox']:checked") ) {
location.reload(true);
}
});
alternative
$('#button').click( function() {
if( $('#checkbox').is(':checked') ) {
location.reload(true);
}
});
All in a one plate methods:
$('#checkbox').is(":checked")
$('#checkbox').prop('checked')
$('#checkbox')[0].checked
$('#checkbox').get(0).checked
Using Ember, I have an object in my controller that looks like this:
ItemDetails: {
Retrieved: '2016-07-09',
User: 'someuser',
Items: [
{
Name: 'Item',
Price: 'value'
},
// snip
]
}
This is set in the controller init using this.set('ItemDetails', jsonObject).
The template is rendered as
{{#each ItemDetails.Items as |Item|}}
{{Item.Name}}
{{Item.Price}}
<input type="button" {{action "Remove" Item.Name }} value="Remove" class="btn btn-primary" />
{{/each}}
The action for Remove is defined thusly:
Remove: function(itemName) {
var details = this.get('ItemDetails');
var index = -1;
for(var i = 0; i < details.Facets.length; i++) {
if(details.Items[i].Name == itemName) {
index = i;
break;
}
}
if(index > -1) {
details.Items.splice(index, 1)
this.set('Search', details);
}
}
Now using the Chrome debugger I can confirm that the array is correct and the correct item is being removed. Subsequent calls in also show the array internally looks like it should.
However, the template does not reflect this change, i.e. the Item is still shown along with it's remove button. What am I doing wrong that the template is not being updated?
There are certain public methods which should be used to modify the array so that changes are observable. Here is the link:
http://emberjs.com/api/classes/Ember.MutableArray.html
In your case, looks like the logic is correct. However, instead of using .splice() you should use .removeAt(index). Or, there are other simpler ways to solve it like using .removeObject().
For example:
http://emberjs.jsbin.com/zezera/edit?html,css,js,output
Hope this helps. Thanks
I'd like to transition one element as it changes to another element.
I've got 3 examples:
one that works, but uses a list of items that are kept around (jsfiddle)
one that doesnt work, and only keeps one item around, depending on the state (jsfiddle)
another one that doesn't work, that keeps both items around and hides/shows them (jsfiddle using hide/show)
What I want is more like the second one, which is a very slight variation of the first attempt that works.
Option 1:
/** #jsx React.DOM */
var ReactTransitionGroup = React.addons.TransitionGroup;
var TodoList = React.createClass({
getInitialState: function() {
return {items: ['hello', 'world', 'click', 'me']};
},
handleAdd: function() {
var newItems =
this.state.items.concat([prompt('Enter some text')]);
this.setState({items: newItems});
},
handleRemove: function(i) {
var newItems = this.state.items;
newItems.splice(i, 1)
this.setState({items: newItems});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<div key={item} onClick={this.handleRemove.bind(this, i)}>
{item}
</div>
);
}.bind(this));
return (
<div>
<div><button onClick={this.handleAdd} /></div>
<ReactTransitionGroup transitionName="example">
{items}
</ReactTransitionGroup>
</div>
);
}
});
var app = React.renderComponent(<TodoList />, document.body);
Option 2:
JSX that doesn't work, but is closer to what I'd like to do (really, hide one view, and show another)
/** #jsx React.DOM */
var ReactTransitionGroup = React.addons.TransitionGroup;
var Test = React.createClass({
getInitialState: function() {
return {showOne:true}
},
onClick: function() {
this.setState({showOne:! this.state.showOne});
},
render: function() {
var result;
if (this.state.showOne)
{
result = <div ref="a">One</div>
}
else
{
result = <div ref="a">Two</div>
}
return (
<div>
<div><button onClick={this.onClick}>switch state</button></div>
<ReactTransitionGroup transitionName="example">
{result}
</ReactTransitionGroup>
</div>
);
}
});
var app = React.renderComponent(<Test />, document.body);
Option 3:
Uses hide/show to keep the 2 views around, but still doesn't work.
/** #jsx React.DOM */
var ReactTransitionGroup = React.addons.TransitionGroup;
var Test = React.createClass({
getInitialState: function() {
return {showOne:true}
},
onClick: function() {
this.setState({showOne:! this.state.showOne});
},
render: function() {
var result;
var c1 = this.state.showOne ? "hide" : "show";
var c2 = this.state.showOne ? "show" : "hide";
return (
<div>
<div><button onClick={this.onClick}>switch state</button></div>
<ReactTransitionGroup transitionName="example">
<div className={c1}>One</div>
<div className={c2}>Two</div>
</ReactTransitionGroup>
</div>
);
}
});
var app = React.renderComponent(<Test />, document.body);
So long story short - How can I make a transition execute on switching from one main "component" to another? I don't get why option 1 works, but option 2 doesn't!
React is just changing the content of the DOM because that's all that changed. Give the elements unique keys to make them animate.
if (this.state.showOne)
{
result = <div key="one">One</div>
}
else
{
result = <div key="two">Two</div>
}
JSFiddle
I used Michelle Treys answer to solve a similar problem using React-Router (1.0.1). Its not clear from the api that the key is needed. I was following React-routers suggestion to render a routes children in a parent as follows:
render() {
return (
<div id='app-wrapper'>
<ReactTransitionGroup component='div' className='transition-wrapper'>
{this.props.children}
</ReactTransitionGroup>
</div>
);
}
However the componentWillEnter only triggered on page load. Following Michelle's solution, I cloned a the children as per the react-router updates and added a key as follows:
render() {
const { location } = this.props;
return (
<div id='app-wrapper'>
<ReactTransitionGroup component='div' className='transition-wrapper'>
{React.cloneElement(this.props.children, {
key: location.pathname,
})}
</ReactTransitionGroup>
</div>
);
}
Thanks for the fix. Cheers