As I am working on mounting an htmlform element and recompiling it with some props, I encountered errors in the Console when trying to update the props. You can view the screenshot here.
<script>
//imports here
export default{
props:['pma_posturl','pma_password','pma_username'],
data: function(){
return{
domain:'',
url:'',
dbs:[],
credentials:''
}
},
methods:{
//functions to get credentials
getcredentials(){
this.popup();
},
popup(){
//update props values that Vue.js complains about
this.pma_username=this.credentials.database;
this.pma_password=this.credentials.password;
this.pma_posturl="URL"+this.credentials.database;
console.log(this.pma_username); //correct value
this.compile('dbform',this.props);
$('#myform').submit();
},
compile: function(refs,props){
var tmp = Vue.extend({
props: props,
template: '<form method="post" :action="pma_posturl" id = "myform" ref="myform" name="login_form" target="_blank"><input type="text" name="pma_username" id="input_username" :value="pma_username"><input type="password" name="pma_password" id="input_password" :value="pma_password"></form>'
});
new tmp().$mount(this.$refs[refs]);
}
}
}
</script>