Suppose I have an input field in Vue.JS that v-model bind to a String data property, and a long list of random numbers that are completely unrelated to that first String.
data: {
input: "",
randoms: []
}
<input type="text" v-model="input">
<p v-for="random in randoms" v-text="random"></p>
When I put both in the same Vue, I see a huge slowdown when typing in the input field, as it appears Vue is reevaluating the DOM for each list entry after every input event, although they really have nothing to do with each other.
https://jsfiddle.net/5jf3fmb8/2/
When I however move the v-for to a child component where I bind randoms to a prop, I experience no such slowdown
https://jsfiddle.net/j601cja8/1/
Is there a way I can achieve the performance of the second fiddle without using a child-component?
Is there a way I can achieve the performance of the second fiddle without using a child-component?
Short answer
No.
Long answer
Whenever any dependency of the template changes, Vue has to re-run the render function for the entire component and diff the new virtualDOM against the new one. It can't do this for this or that part of the template only, and skip the rest. Therefore, each time the input value changes, the entire virutalDOM is re-rendered.
Since your v-for is producing quite a bit of elements, this can take a few 100ms, enough to be noticable when you type.
Extracting the heavy part of the template into its own component is in fact the "official" way to optimize that.
As Alex explained, v-model.lazy might improve the situation a bit, but does not fix the core of the issue.
Shortest, simplest answer: change v-model to v-model.lazy.
When I put both in the same Vue, I see a huge slowdown when typing in the input field, as it appears Vue is reevaluating the DOM for each list entry after every input event, although they really have nothing to do with each other.
Note that the OnceFor sample still chugs like mad despite not actually being reactive any more. I don't understand Vue well enough to say if that's intentional or not.
const Example = {
data() { return { input: "", randoms: [] } },
created() { this.newRandoms() },
methods: {
newRandoms() { this.randoms = Array(50000).fill().map(() => Math.random()) }
}
}
new Vue({
el: "#vue-root",
data(){ return {example: 'lazy-model'}},
components: {
LazyModel: {...Example, template: "#lazy-model"
},
OnceFor: {...Example, template: "#once-for"
},
InlineTemplate: {...Example, template: "#inline-template",
components: {
Welp: {
props: ['randoms']
}
}
}
}
})
button,
input,
div {
margin: 2px;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="vue-root">
<span><button v-for="(component, name) in $options.components" #click="$set($data, 'example', name)">{{name}}</button></span>
<component :is="example"></component>
</div>
<template id="lazy-model">
<div>
<input type="text" v-model.lazy="input"><br>
<input type="submit" value="Regenerate" #click="newRandoms">
<p v-for="random of randoms" v-text="random"></p>
</div>
</template>
<template id="once-for">
<div>
<input type="text" v-model="input"><br>
<input type="submit" value="Regenerate" #click="newRandoms">
<p v-for="random of randoms" v-text="random" v-once></p>
</div>
</template>
<template id="inline-template">
<div>
<input type="text" v-model="input"><br>
<input type="submit" value="Regenerate" #click="newRandoms">
<welp :randoms="randoms" inline-template>
<div>
<p v-for="(random, index) of randoms" :key="index"> {{index}}: {{random}} </p>
</div>
</welp>
</div>
</template>
Related
I have a component, which is essentially an input/select hybrid field, which allows users to type in the input field, and select items from the dropdown, based on their query.
It works perfectly fine on most devices I've tried, i.e. as the user types something into the input field, the list of items updates and only shows those items which contain that piece of string.
Except the Chrome browser on my Android device - as you type, the list doesn't seem to update, unless I press the "space bar". Very strange. Anyone have any ideas why this might be?
Here is the code in <script setup>:
const props = defineProps([ 'items', 'searchBy' ])
const searchTerm = ref('')
const itemsToShow = computed(() => {
if (props.items) {
if (searchTerm.value) {
return props.items.filter(el => {
if (props.searchBy) {
return el[props.searchBy].toUpperCase().indexOf(searchTerm.value.toUpperCase()) > -1
}
return el.toUpperCase().indexOf(searchTerm.value.toUpperCase()) > -1
})
} else {
return props.items
}
} else {
return []
}
})
And the HTML:
<input
type="text"
class="input"
v-model="searchTerm"
placeholder=" "
/>
<div class="items-list">
<div
v-for="item in itemsToShow"
:key="item"
#click="() => handleAdd(item)"
class="item text"
>
{{ item }}
</div>
<div
v-if="!itemsToShow.length"
class="text"
>
No items match searched term
</div>
</div>
UPDATE:
I've investigated a little, and it seems the searchTerm ref, isn't updating properly, even though its bound using v-model... Still no idea why though.
I've ran into this issue before.
It seems that on certain devices, the v-model waits for a change event, instead of an input one.
Apparently, it's to do with the input method editor (IME) for the specific device.
You can check a discussion about this at https://github.com/vuejs/core/issues/5580
The workaround is to simply bind the input field with value and listen for the input event manually, e.g.
<input
type="text"
class="input"
:value="searchTerm"
#input="(e) => searchTerm = e.target.value"
placeholder=" "
/>
I've seen a component in Element UI for managing the amount of items, it's over here:
https://element.eleme.io/#/en-US/component/input-number
I would want to use something like that in Vuetify, but I cannot find a similar component or even similar style example in Material Design. What's the best way to achieve it?
Yes there is:
<v-text-field
v-model="numberValue"
hide-details
single-line
type="number"
/>
Check out slider component docs for a working example.
Update: This answer pertains to version 1 of Vuetify, yukashima huksay's answer is correct for newer versions of Vuetify.
Setting the type attribute to type="number" is the way to go.
Original:
You could just make your own:
new Vue({
el: '#app',
data () {
return {
foo: 0
}
},
methods: {
increment () {
this.foo = parseInt(this.foo,10) + 1
},
decrement () {
this.foo = parseInt(this.foo,10) - 1
}
}
})
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-text-field v-model="foo" type="number" label="Number" append-outer-icon="add" #click:append-outer="increment" prepend-icon="remove" #click:prepend="decrement"></v-text-field>
</v-container>
</v-content>
</v-app>
</div>
in vuetify.js v2.2.22 to convert your <v-text-field> in number you need write v-model.number
<v-text-field
v-model.number="foo"
label="Number"
append-outer-icon="add"
#click:append-outer="increment"
prepend-icon="remove"
#click:prepend="decrement">
</v-text-field>
type="number" was delete
Some concepts for number inputs get mixed up here.
I can not see type="number" being deleted in 2.2.22 https://github.com/vuetifyjs/vuetify/compare/v2.2.21...v2.2.22 Also I see it being rendered correctly at least in 2.3.10
The input field with attribute type="number" will be handled differently depending on the browser, OS and locale settings (e.g. I am still able to input free text in FF but not Chrome). Typically the keyboard layout changes on smart phones.
v-model.number is purely a directive for Vue. As you can see, internally, Vue simply tries to parse the input with parseFloat and uses that on success - otherwise it will be text and handled as a string in Vue/JS. https://v2.vuejs.org/v2/guide/forms.html#number
Vue vuetify Code
using :rules="maxRules"
<template>
<div>
<v-text-field v-model="text1" :rules="maxRules" label="Credit Amount"></v-text-field>
</div>
</template>
<script>
export default {
data () {
return {
limit:500,
maxRules: [
(v)=> {
if (this.text1 > this.limit) {
return 'Error'
}
}
]
}
}
}
</script>
I have a requirement in my React-based application to render dynamic forms. The form definitions are stored as JSON documents and I already have a JS library that parses the definitions and returns a DocumentFragment. This library is used in other non-React applications as well so I cannot change it.
To avoid re-writing the entire logic in my React application to parse the definitions and render the forms, I want to use the existing library.
My question is, what would be the best way to render the DocumentFragment in a React component?
Here is my DocumentFragment if I just output it to the console in my render() method.
#document-fragment
<fieldset id="metadata-form-908272" class="metadata-form-rendition hide-pages">
<div class="page-header-row">
<div class="page-header-cell">
<span>[Un-named page]</span>
<button class="page-header-button button icon">
<span class="icon icon-arrow-up-11"></span></button>
</div>
</div>
<div class="page-area" id="metadata-form-page-001-area">
<div class="question-row">
<div class="question-label-cell mandatory">I have read and understood my obligations:</div>
<div class="question-input-cell">
<div class="validation-message"></div>
<label><input type="radio" value="Yes" name="metadata-form-908272-question-1">
<span>Yes</span></label>
<label><input type="radio" value="No" name="metadata-form-908272-question-1">
<span>No</span></label>
</div>
</div>
<div class="question-row">
<div class="question-label-cell">Please state all sources for the information provided:</div>
<div class="question-input-cell">
<div class="validation-message"></div>
<div class="formatted-editor">
<div class="editor-area" contenteditable="true">
<p></p>
</div>
</div>
</div>
</div>
</div>
</fieldset>
Update: Security Alert!
Thanks for reminding from #JaredSmith in comment, the method provided here
really has security issue. It's not proper to apply it if the library is not from your internal.
To learn more about the issue, you could look into the link of dangerouslysetinnerhtml I referred below.
Here is indeed a tricky way to achieve your goal. By the information you provided in comment:
... I call theExternalLibrary.getFormFragment({some_data}) ...
cause that DocumentFragments only in memory, maybe as you know, we need to append the fragment to a real DOM element first, so let's just create a root element for appending:
let rootElement = document.createElement("div");
let frag = theExternalLibrary.getFormFragment({some_data});
rootElement.appendChild(frag);
Now we have a pure JavaScript elements DOM tree here. In order to convert it to React elements, here is the way which involves a method that react provides: dangerouslysetinnerhtml
You could see that this method is not encouraged to use by its scary name.
render() {
let rootElement = document.createElement("div");
let frag = theExternalLibrary.getFormFragment({some_data});
rootElement.appendChild(frag);
// rootElement.innerHTML is in string type.
return <div dangerouslySetInnerHTML={{ __html: rootElement.innerHTML }} />;
}
Live example:
I took a crack at this myself, as DOMPurify and the upcoming Sanitiser API work best when returning DocumentFragments:
function getDocumentFragment(text) {
const f = document.createDocumentFragment();
const p = document.createElement("p");
p.textContent = text;
f.appendChild(p);
return f;
}
class FragmentRenderer extends React.Component {
constructor(props) {
super(props);
this.setRef = this.setRef.bind(this);
}
setRef(ref) {
this.ref = ref;
}
componentDidMount() {
this.appendFragment();
}
componentDidUpdate(prevProps) {
if (prevProps.text != this.props.text) {
this.appendFragment();
}
}
appendFragment() {
if (!this.ref) {
return;
}
while (this.ref.firstChild) {
this.ref.removeChild(this.ref.firstChild);
}
this.ref.appendChild(getDocumentFragment(this.props.text));
}
render() {
return React.createElement("div", {
ref: this.setRef
});
}
}
ReactDOM.render(React.createElement(FragmentRenderer, {
text: "Just like this"
}), document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
So now you're not casting to a string and using dangerouslySetInnerHTML, which can in extreme cases lead to the elements you write being different to the elements in the original fragment, due to parsing issues. However, you do still need to trust whereever this fragment came from - it cannot come from a user-controlled source. DOMPurify or the Sanitizer API will be your best friends here.
I have been trying to get this to work for a while now and not sure how to do the following. My form component has children that contain regular html markup as well a inputs. If the child is a Input I want to add the attachToForm and detachFromForm functions. If it is not an input I want to continue traversing the children to make sure that the element does not have a child input field. Wether or not the element is an input I still want it to appear on my page, I just want to add the functions to the inputs.
The problem is I can only get my function to return only the inputs, removing the labels and title. I know that is because Im only adding elements with inputs to newChildren, but if I push the other elements in the else if section I get duplicates and i can think of another way of doing this. Im not sure if im not understanding basic JS or having a brain gap.
React.Children.forEach(children, function(child) {
var current = child;
if (child.props && child.props.name) {
this.newChildren.push(React.cloneElement(child, {
detachFromForm: this.detachFromForm,
attachToForm: this.attachToForm,
key: child.props.name
}));
} else if (child.props && child.props.children){
this.newChildren.push(child);
this.registerInputs(child.props.children);
} else {
*need to keep track of parent elements and elements that do not have inputs
}
}.bind(this));
Edit: Not sure if needed but this is and example form im traversing
return (
<Modal className="_common-edit-team-settings" title={`Edit ${this.props.team.name}`} isOpen={this.props.modalIsOpen && this.props.editTeamModal} onCancel={this.props.toggleEditTeamModal} backdropClosesModal>
<Form onSubmit={this.saveChanges}>
<FormSection className="edit-team-details" sectionHeader="Team Details">
<FormField label="Name">
<Input name="name" value={this.state.values.name} onChange={this.handleInputChange} type="text" placeholder={this.props.team.name}/>
</FormField>
<FormField label="Mission">
<Input name="mission" value={this.state.values.mission} onChange={this.handleInputChange} type="text" placeholder={this.props.team.kitMission || 'Kit Mission'} multiline />
</FormField>
</FormSection>
<FormSection className="privacy-settings" sectionHeader="Privacy Settings">
<FormField label="Included in global search results" >
<SlideToggle name="globalSearch" defaultChecked={this.state.values.globalSearch} onChange={this.handleCheckedChange} type="checkbox" />
</FormField>
<FormField label="Accessible by anyone" >
<SlideToggle name="public" defaultChecked={this.state.values.public} onChange={this.handleCheckedChange} type="checkbox" />
</FormField>
<FormField label="Secured with WitCrypt" >
<SlideToggle name="witcryptSecured" defaultChecked={this.state.values.witcryptSecured} onChange={this.handleCheckedChange} type="checkbox" />
</FormField>
</FormSection>
<FormSection sectionHeader="Participants">
{participantsList}
<div id="add-participant" className="participant" onClick={this.toggleAddParticipantModal}>
<span className="participant-avatar" style={{backgroundImage:'url(/img/blue_add.svg)'}}></span>
<span>Add a Participant</span>
<span className="add-action roll"><a></a></span>
</div>
</FormSection>
<Button type="hollow-primary" size="md" className="single-modal-btn" block submit>Save</Button>
</Form>
<AddParticipant people={this.props.people} toggleAddParticipantModal={this.props.toggleAddParticipantModal} modalIsOpen={this.props.modalIsOpen} toggleAddParticipantModal={this.toggleAddParticipantModal} addParticipantModal={this.state.addParticipantModal} />
</Modal>
);
As an aside I started out a lot simpler wanting to do the following but get:
"Can't add property attachToForm, object is not extensible"
If anyone knows why please let me know.
registerInputs: function (children) {
React.Children.forEach(children, function (child) {
if (child.props.name) {
child.props.attachToForm = this.attachToForm;
child.props.detachFromForm = this.detachFromForm;
}
if (child.props.children) {
this.registerInputs(child.props.children);
}
}.bind(this));
}
Judging of an error message, you have a problem with immutable prop object. Starting from React 0.14 the prop is "frozen":
The props object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, React.cloneElement should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
Blog post on this
So somewhere in your code you try to extend a prop object causing an error.
You could wrap different parts of your prop interactions with try..catch construction which will point you the exact problem place.
The code below is from React, which updates the DOM dynamically. I used the tutorial by Facebook react but did not understand the whole code, i.e which part of the code executes when and how it triggers the rest of the parts in the code. Please kindly help me in understanding the code.
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
var TodoApp = React.createClass({
getInitialState: function() {
return {items: [], text: ''};
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: function() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
});
React.renderComponent(<TodoApp />, mountNode);
The above code is used to dynamically update the DOM structure. This code is referred from http://facebook.github.io/react/ so please help in knowing the work process of the code.
Thanks, that's a very good question. Here's a rough overview of what is happening behind the scenes:
Initialization
It all starts with this line:
React.renderComponent(<TodoApp />, mountNode);
This instantiate the TodoApp component which calls:
TodoApp::getInitialState()
then, it renders the TodoApp component
TodoApp::render()
which in turns instantiate a TodoList
TodoList::render()
At this point, we have everything we need in order to render the initial markup
<div>
<h3>TODO</h3>
<ul></ul> <!-- <TodoList> -->
<form>
<input value="" />
<button>Add #1</button>
</form>
</div>
It is stringified and added inside of mountNode via innerHTML
OnChange
Then let's say you're going to enter some text in the input, then
TodoApp::onChange
is going to be called, which is going to call
TodoApp::setState
and in turn will call
TodoApp::render
again and generate the updated DOM
<div>
<h3>TODO</h3>
<ul></ul> <!-- <TodoList> -->
<form>
<input value="sometext" />
<button>Add #1</button>
</form>
</div>
What's happening at this point is that React is going to do a diff between the previous DOM and the current one.
<div>
<input
- value=""
+ value="sometext"
Only the value of the input changed, so React is going to just update this particular attribute in the real DOM.
You can find more general explanation on React official page.
Generally the react lifecycle can be described by the following stages (which can repeat multiple times once the components is created):
Initializing values (only once):
constructor(){ ... }
Mounting, if you need to add something after initial rendering (only once):
componentDidMount(){...}
Re-rendering functions, variables and components
myArrowFunction = () => {
...
this.setState({...})
...
}
Updating:
componentDidUpdate()}{...}
shouldComponentUpdate(){...}
Unmounting:
componentWillUnmount(){...}
Rendering happens here
render(){...}