Question

我正在安装htmlform元素并进行重新编译。它需要一些道具。当我更新控制台下方列出的道具时，会引发以下错误：- 在这里查看截图

 <script>
     //some import over here

export default{
  props:['pma_posturl','pma_password','pma_username'],
  data: function(){
    return{
    domain:'',
    url:'',
    dbs:[],
    credentials:''
  }
},
methods:{
  //some functions to getting the credentials
  getcredentials(){

    this.popup();
  },
  popup(){

     //updating props value which 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); //has 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>

Answer 1

您必须删除以下代码：

    //updating props value which 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); //has correct value
 this.compile('dbform',this.props);

并根据当前组件的props创建新对象，如下所示：

  let customprops={
                  'pma_posturl':"URL"+this.credentials.database,
                  'pma_password':this.credentials.password,
                 'pma_username': this.credentials.database
               }

   this.compile('dbform',customprops);

Answer 2

我在传递propsdata错误。这正在工作。

compile: function(refs,props){
        var tmp = Vue.extend({
          props: ['pma_posturl','pma_password','pma_username'],
          template: '<form ......>........</form>'
        });
        new tmp({
        propsData: props
      }).$mount(this.$refs[refs]);

这是现在的代码。但即使我可以在此处控制台记录新值，它也会继续收集第一次通话时设置的旧值。

 // console.log(props) /* it has the latest value */
 var vm = new tmp({propsData: props}).$mount(this.$refs[refs]);
 $('#myform').submit();
  vm.$destroy();

当我登录vm。$ destory（）时，我不确定。在这里我怎么了？

在编译时在vue js中传递道具

2 个答案: