vue.js


vuejs2 passing data between parent-child is wiping childs value


In VueJS 2 I am trying to create a component that gets and passes data back to the parent which then passes it to another component to display.
The component that gets the data has a user input field it uses to search. When I have it pass data back to the parent using $emit the value in the input keeps being wiped.
I am receiving the below mutation error but I haven't directly tried to change the userSearch field in the component so I am not sure why.
"Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "userSearch" (found in PersonField)"
Relevant html
<person-field v-on:event_child="eventChild"></person-field>
<person-search :prop="personListArray" ></person-search>
Parent app
var app = new Vue({
el: '#app',
data: {
personListArray : [],
tempArray: []
},
methods: {
eventChild: function (arr) {
this.personListArray = arr
}
}
})
Component 1, displays a user input. Uses the input to search and bring back data. Starts search when the length of the input is more then 2. As soon as you hit the 3rd character something is causing the input to clear which I don't want.
Vue.component('person-field', {
props: ['userSearch'],
template: '<input class="form-control" v-model="userSearch" >',
watch: {
userSearch: function () {
var arr = []
if (typeof this.userSearch !== 'undefined') { //added this because once i passed 3 characters in the field the userSearch variable becomes undefined
if (this.userSearch.length > 2) {
$.each(this.getUsers(this.userSearch), function (index, value) {
var obj = {
Title: value.Title,
ID: value.ID
}
arr.push(obj)
});
this.$emit('event_child', arr) //emits the array back to parent "eventChild" method
} else {
console.log('no length')
}
} else {
console.log('cant find field')
}
},
},
methods: {
getUsers: function (filter) {
//gets and returns an array using the filter as a search
return arr
},
}
});
Component 2 - based on the personListArray which is passed as a prop, displays the results as a list (this works)
Vue.component('person-search', {
props: ['prop'],
template: '<ul id="personList">' +
'<personli :ID="person.ID" v-for="person in persons">' +
'<a class="" href="#" v-on:click="fieldManagerTest(person.Title, person.ID)">{{person.Title}}</a>' +
'</personli></ul>',
computed: {
persons: function () {
return this.prop
}
},
methods: {
fieldManagerTest: function (title, ID) { //Remove item from users cart triggered via click of remove item button
//var user = ID + ';#' + title
//this.internalValue = true
//this.$emit('fieldManagerTest');
//this.$parent.$options.methods.selectManager(user)
},
},
});
Component 3, part of component 2
Vue.component('personli', {
props: ['ID'],
template: '<transition name="fade"><li class="moving-item" id="ID"><slot></slot></li></transition>'
})
;
The reason you get the warning,
Avoid mutating a prop directly since the value will be overwritten
whenever the parent component re-renders. Instead, use a data or
computed property based on the prop's value. Prop being mutated:
"userSearch" (found in PersonField)
Is because of this line
<input class="form-control" v-model="userSearch" >
v-model will attempt to change the value of the expression you've told it to, which in this case is userSearch, which is a property.
Instead, you might copy userSearch into a local variable.
Vue.component('person-field', {
props: ['userSearch'],
data(){
return {
searchValue: this.userSearch
}
},
template: '<input class="form-control" v-model="searchValue" >',
...
})
And modify your watch to use searchValue.
Here is an example.

Related Links

Vue.js: Detect change in nested data
How to trigger a transition when a component is reused?
Bootstraping with vue 2, router and vue-loader
Attaching data (body) to $http.delete event in VueJS
Initialize VueJs after opening new tab
What is the recommended approach for preventing navigation for a subroute?
Emit an event when a specific piece of state changes in vuex store
Vue Router Error
$nextTick, show/hide and VueX
How to pass dynamic data to a component?
Global catch for submit forms in Vue.js 2.0
Add character to attribute in VueJs Templating
Vue: Can't iterate Object
Vue 2 vue-router 2 laravel 5.3 issue
SyntaxError: Unexpected token … (82:8) in Browserify
How do i extend a component without altering the parent template? (VueJs)

Categories

HOME
xbox-live
numpy
payment-gateway
npm
sed
voip
system-verilog
visualization
travis-ci
codeeffects
hyperledger-fabric
jrebel
quill
urlencode
ng-admin
hosts
ndis
nixos
camera-calibration
tee
qt-installer
glpk
typeahead
netezza
reduction
phpbb
attask
thumbnails
jconsole
sql-update
spring-ws
myob
auditing
guile
interrupt-handling
widevine
winscp
bxslider
jackson-dataformat-csv
division
fabric-digits
honeysql
oscommerce
xen
mms
rhel.net
inkscape
soundjs
automator
nsjsonserialization
data-integration
windows-firewall
pinvoke
gce
pycurl
visual-studio-templates
efxclipse
keycode
uistackview
mongoose-populate
ruby-2.0
multiple-file-upload
qregexp
gradle-release-plugin
dac
flexjson
axes
difference
lemoon
mogrify
leadtools-sdk
ffprobe
crash-dumps
qtestlib
dalekjs
boost-test
sqljdbc
fogbugz-api
ftp4j
windows-update
nuspec
osi
subtract
querystringparameter
nsindexpath
windows-live-id
email-spec
jquery-ui-button
openvg
openwysiwyg
web-statistics
internals
winsnmp
handheld

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App