V-model in vue, rendering problem

there is a business scenario, that is, I have a form form fields that are bidirectional data bound through form data objects, responsible for adding and editing items

[scene] Open the edit button, get the value from the interface, assign the content to the page, and open the new button. According to reason, you need to empty the form

. The

problem arises, that is, when I open the form, I directly assign an empty object to the two-way bound object of the form, and the page is empty, but I have a doubt that the field bound to the page through v-model, why not report an error when I assign the form object to an empty object? 

 <el-form label-width="40px"><el-form-item label="" prop="">
      <el-input size="small" v-model="articleForm.basicTitle"></el-input></el-form-item>
        <el-form-item label="" prop="">
                 <el-input size="small" placeholder="" v-model="articleForm.articleAuthor" >
                    
                 </el-input>
              </el-form-item>
              <el-form-item label="" prop="">
                 <el-input size="small" type="textarea" v-model="articleForm.basicDescription">
                 </el-input>
              </el-form-item>
           </el-form>

data: {

 articleForm: {
        basicTitle: "", //
        articleAuthor: "", //
        basicDescription: "", //
        articleContent: "", //
  },
  mainArticle: {
    basicPic: "", //
    basicTitle: "", //
  },

}
open:function (material) {

if(material && material.newsId>0){
       //     
 }else{
   // 
    this.articleForm = {}
    this.mainArticle = {}
 }

}

Javascript element-ui vue.js
May.28,2022

sort out the problem with this binding.

  1. v-model is a two-way binding. When you set the object to empty, v-model is equivalent to assigning a value to the bound object property, so it will not report an error
  2. and then the mechanism of vue is that watch does not change with the newly added attributes, so you need to use the $set method to set

in general, the form cleanup in my project is done during the watch pop-up window:

:

Previous: Number level definition, ask for help to tell the rule how to write?

Next: Will all pages of mpvue inherit src/app.vue?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu