Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to apply Vue dynamic forms". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's ideas to study and learn "how to apply Vue dynamic forms".

Overview

   background management system has a lot of form requirements, we hope to be able to write a json format of data, through the vue loop to render dynamic forms. And can get the rendered form data externally, so as to do a storage operation.

The understanding of v-model

   vue-model is equivalent to passing a value to the form element and listening for input events externally. So when we encapsulate the form component ourselves, we can also pass a value and listen to the input event to get the input value.

Business application scenario

   recently wrote an online education platform and found that when adding courses in the background, each course requires different parameters (some courses have no special parameters), using fixed forms in this scenario is not elegant and requires a lot of work. In order to solve this problem, we can dynamically display the parameters needed by the course classification form when adding courses, obtain the input course parameters, construct the data, and store them in the database.

Show classification by component

{{data.name}} import bus from'. / bus.js' Export default {/ / declare name name: "Reply", props: ['data'], / / declare component components: {}, / / declare variable data () {return {fid: 0,}}, / / Custom filter filters: {myfilter: function (value) {value = value.slice (0,3) Return value + "*";}}, / / initialize method mounted () {}, / / declare method methods: {/ / Click classification id getfid: function (fid) {this.fid = fid; / / console.log (this.fid); bus.$emit ("msg", fid) LocalStorage.setItem ("fid", this.fid); / unhighlight all highlights var divs = document.getElementsByClassName ("bg"); / / traversal selector for (var I = divs.length-1; I > = 0; iMel -) {/ / unhighlight divs [I] .classList.remove ("bg") } / / first highlight the current element var mydiv = document.getElementById (fid); / / dynamically add the highlight class selector mydiv.classList.add ("bg");} ul {padding-left: 10remt; list-style: none;} .bg {background: orange; color: white;}

ID with third-party component snooping classification

Import Vue from 'vue'export default new Vue ()

Course add Page

The course submission page saves the course / / imports other components import bus from'. / bus.js'; import reply from ". / reply"; import heads from ". / heads" Export default {/ / declare component components: {'reply': reply,' heads': heads,}, / / constructor created () {/ / listens to bus.$on ('msg', target = > {console.log (target); this.fid = target If (this.cid = 0) {this.get_cate (this.fid)} else {this.$toast.fail ("you have saved the course, you cannot select a category again"); return false;}}) }, / / declare variable data () {return {/ / data mydata: {}, / / course classification id fid: localStorage.getItem ("fid"), title: ", price:", desc: ", cid: 0, videos: [], videosrc:" Params: {}, info: {}}, / / initialization method mounted () {this.get_data () }, / / declare method methods: {get_cate (fid) {this.axios.get ('http://localhost:5000/getcate/', {params: {' fid': fid}}) .then (result = > {var myparams = result.data.params) If (myparams =') {myparams = null} myparams = JSON.parse (myparams) this.params = myparams for (var key in this.params) {this.$set (this.info, key,'')} console.log (this.info)})} / / add course addcourse: function () {var lists = [] For (var key in this.info) {lists.push ({'key': key,' value': this.info [key], 'label': this.params [key]})} var list_str = JSON.stringify (lists) var data_post = {fid: this.fid, title: this.title, desc: this.desc, price: this.price Id: localStorage.getItem ("user_id"),} if (lists.length > 0) {data_post = {fid: this.fid, title: this.title, desc: this.desc, price: this.price, id: localStorage.getItem ("user_id") Params:list_str}} this.axios.post ('http://localhost:5000/addcourse/', this.qs.stringify (data_post)). Then ((result) = > {if (result.data.code = 200) {this.$toast.success (' course added successfully') This.cid = result.data.cid;} else {this.$toast.fail (result.data.msg);}}) }, / / get data get_data: function () {/ / send request this.axios.get ('http://localhost:5000/catelist/').then((result) = > {console.log (result); / / declare root node var mytree = {' id': 0, name: ""} Mytree ['children'] = result.data; this.mydata = mytree; console.log (this.mydata);});} ul {padding-left: 10remt; list-style: none Thank you for your reading, the above is the content of "how to apply Vue dynamic form". After the study of this article, I believe you have a deeper understanding of how to apply Vue dynamic form, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.